如何从MediaElementAudioSourceNode获取适配music-tempo的AudioBuffer数据

问题背景与排查结果 #

更新： 经排查发现，我的videoElement并未关联真实视频内容。尽管YouTube视频正在播放，但videoElement并未触发play、timeupdate等事件，也未获取到任何视频数据。我原本以为MediaElement.js会将videoElement与YouTube嵌入iframe内的真实视频元素关联，但它似乎仅做了代理处理。

替换为非YouTube的真实视频后，timeDomainDataArray会得到非零值。

核心需求 #

我通过以下代码获取了一个MediaElementAudioSourceNode：

audioCtx.createMediaElementSource(videoElement)

如何从中获取适配music-tempo的音频数据缓冲区？

music-tempo要求传入的缓冲区格式为：非交错IEEE754 32位线性PCM，标称范围在-1到+1之间，即每个样本值在-1.0到1.0之间的32位浮点缓冲区。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视频的节拍并进行可视化。

解决方案 #

1. 解决YouTube视频的音频捕获限制 #

MediaElement.js对YouTube iframe仅做代理，无法直接通过videoElement获取音频流，原因是跨域限制：

• 放弃使用createMediaElementSource，因为YouTube音频在iframe内部，无法跨域访问原始音频流。
• 可选方案：
  • 用getUserMedia配合MediaRecorder捕获桌面音频，但需要用户授权，且仅支持桌面端主流浏览器。
  • 使用YouTube官方API获取音频流，但需申请API密钥，有调用次数限制。

2. 正常视频/音频元素的适配方案 #

如果处理非跨域的普通视频/音频元素，可通过以下两种方式获取符合music-tempo要求的音频缓冲区：

方法一：ScriptProcessorNode（兼容性好，已标记废弃但仍可使用）

let audioCtx = new AudioContext();
let source = audioCtx.createMediaElementSource(videoElement);
// 创建ScriptProcessorNode，缓冲区大小选1024/2048/4096
let scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);

scriptNode.onaudioprocess = function(e) {
  // 直接获取符合格式的输入缓冲区
  let inputBuffer = e.inputBuffer;
  // 提取单声道数据（music-tempo通常用单声道分析）
  let channelData = inputBuffer.getChannelData(0);
  // 将数据传给music-tempo处理
  // tempoAnalyzer.addSamples(channelData);
};

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

方法二：AudioWorklet（现代浏览器推荐方案）

1. 先创建音频处理器文件（如audio-processor.js）：

class AudioProcessor extends AudioWorkletProcessor {
  process(inputs, outputs) {
    const input = inputs[0];
    if (input.length > 0) {
      const channelData = input[0];
      // 将音频数据发送到主线程
      this.port.postMessage(channelData);
    }
    return true;
  }
}

registerProcessor('audio-processor', AudioProcessor);

2. 主线程代码：

async function setupAudio() {
  let audioCtx = new AudioContext();
  // 加载音频处理器
  await audioCtx.audioWorklet.addModule('audio-processor.js');
  
  let source = audioCtx.createMediaElementSource(videoElement);
  let processor = new AudioWorkletNode(audioCtx, 'audio-processor');
  
  processor.port.onmessage = function(e) {
    const channelData = e.data;
    // 传给music-tempo处理
    // tempoAnalyzer.addSamples(channelData);
  };

  source.connect(processor);
  processor.connect(audioCtx.destination);
  source.connect(audioCtx.destination);
}

// 在用户交互（如按钮点击）中调用
setupAudio();

3. 修复你之前的代码问题 #

你之前的代码返回全0，是因为调用getFloatTimeDomainData的时机过早，音频流还未通过Analyser节点。需要在音频播放后循环获取数据：

let audioCtx = new AudioContext();
let source = audioCtx.createMediaElementSource(videoElement);
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048; // 显式设置FFT大小，避免默认值差异
const timeDomainDataArray = new Float32Array(analyser.fftSize);

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

// 循环获取音频数据
function fetchAudioData() {
  analyser.getFloatTimeDomainData(timeDomainDataArray);
  console.table(timeDomainDataArray);
  requestAnimationFrame(fetchAudioData);
}

// 确保视频播放后启动数据捕获，同时唤醒AudioContext（浏览器限制）
videoElement.addEventListener('play', () => {
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  fetchAudioData();
});

内容的提问来源于stack exchange，提问作者Leftium