如何从 HTML 视频元素 (MediaElementAudioSourceNode) 获取 AudioBuffer 数据

Question

我有一个

MediaElementAudioSourceNode

通过以下方式获得：

audioCtx.createMediaElementSource(videoElement)

如何从中获取适合输入到

music-tempo

的音频数据缓冲区？

以以下格式传递... MusicTempo [a]缓冲区...：非交错IEEE754 32位线性PCM，标称范围在-1和+1之间[。 T]hat 是一个[32 位]浮点缓冲区，每个[样本]在-1.0 和1.0 之间。 此格式用于Web Audio API的AudioBuffer接口。

---

我尝试了以下代码，但是

timeDomainDataArray

填充了所有

0

值：

let audioCtx = new AudioContext();
let source = audioCtx.createMediaElementSource(videoElement);
const analyser = audioCtx.createAnalyser();


const timeDomainDataArray = new Float32Array(analyser.fftSize);
analyser.getFloatTimeDomainData(timeDomainDataArray);


source.connect(analyser);
source.connect(audioCtx.destination);

console.log({ source });
console.table(timeDomainDataArray);

（上面的代码是在手动启动视频播放后在按钮单击处理程序内运行的。）

我相信这与 来自另一个项目的代码类似，但我不确定与我的代码有什么区别。

---

最终目标是检测 YouTube 视频中的节拍，以便将它们可视化。

Answer 1

可能您的视频元素尚未播放。尝试在媒体播放后获取分析器数据。例如：

let videoElement = document.getElementById('videoElement')
  let audioCtx, source, analyser
  videoElement.addEventListener('play', () => {
    audioCtx = new AudioContext()
    source = audioCtx.createMediaElementSource(videoElement)
    analyser = audioCtx.createAnalyser()
    source.connect(analyser)
    source.connect(audioCtx.destination)
  })
  videoElement.addEventListener('timeupdate', () => {
    const timeDomainDataArray = new Float32Array(analyser.fftSize)
    analyser.getFloatTimeDomainData(timeDomainDataArray)
    console.log({ source })
    console.log(timeDomainDataArray)
  })