如何通过video元素API获取音频缓冲区实现实时音频处理

你代码的核心问题是对Web Audio API的节点类型理解有误：

• createMediaElementSource(video)返回的MediaElementAudioSourceNode是实时流式音频源，输出的是视频播放过程中逐帧解码的音频流，本身不会挂载静态的AudioBuffer对象。
• 你在ontimeupdate里手动新建的AudioBufferSourceNode是用来播放预解码静态音频的节点，初始化时如果没有手动给buffer属性赋值，默认值就是null，它不会自动关联video的音频流。
• 另外ontimeupdate事件的触发频率最高只有每秒几十次，远低于音频处理需要的采样率（44100/48000次每秒），根本无法实现实时音频操作。

要对video元素的音频做自定义实时操作，不需要拿到完整的音频缓冲区，通过Web Audio的音频处理节点直接接入流处理链即可，兼容性较好的实现方式如下：

完整代码 #

<!DOCTYPE html>
<html>
    <body>
      <button onclick="play()">Play</button>
    </body>
    <script>
      const video = document.createElement('video');
      video.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
      // 跨域资源必须配置该属性，否则浏览器会拦截音频数据读取
      video.crossOrigin = 'anonymous';
      document.body.appendChild(video);

      let audioCtx;
      let audioSource;
      let audioProcessor;

      const play = async () => {
        // 音频上下文必须在用户点击事件中初始化，避免被浏览器自动播放策略拦截
        audioCtx = new AudioContext();
        audioSource = audioCtx.createMediaElementSource(video);

        // 创建实时音频处理器，参数：缓冲区大小、输入声道数、输出声道数
        // 缓冲区大小可选256/512/1024/2048/4096/8192/16384，值越小延迟越低、性能消耗越高
        audioProcessor = audioCtx.createScriptProcessor(4096, 2, 2);

        // 注册音频处理回调，每帧音频解码完成都会触发该方法
        audioProcessor.onaudioprocess = (processEvent) => {
          // 输入缓冲区就是当前video播放的实时音频数据
          const inputBuffer = processEvent.inputBuffer;
          // 输出缓冲区是最终输出到扬声器的数据，修改该缓冲区内容即可实现自定义音效
          const outputBuffer = processEvent.outputBuffer;

          // 以下是自定义音频操作示例：直接透传音频，可按需修改采样值实现效果
          for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
            const inputSamples = inputBuffer.getChannelData(channel);
            const outputSamples = outputBuffer.getChannelData(channel);
            for (let sampleIndex = 0; sampleIndex < inputSamples.length; sampleIndex++) {
              // 示例：原音透传，要做音量调整、降噪、混响、音频可视化采样等效果直接修改outputSamples[sampleIndex]即可
              outputSamples[sampleIndex] = inputSamples[sampleIndex];
            }
          }
        };

        // 连接音频处理链路：视频音频源 -> 自定义处理器 -> 扬声器输出
        audioSource.connect(audioProcessor);
        audioProcessor.connect(audioCtx.destination);

        await video.play();
        // 恢复被浏览器挂起的音频上下文
        if (audioCtx.state === 'suspended') {
          await audioCtx.resume();
        }
      };
    </script>
</html>

• 如果使用本地或同域视频资源可以忽略跨域配置，使用第三方视频资源必须保证资源返回头包含允许跨域访问的CORS配置，否则浏览器会强制让音频源输出静音，无法读取采样数据。
• 上述代码使用的ScriptProcessorNode是兼容最广的旧版API，如果追求更低延迟、更稳定的处理性能，可以替换为AudioWorklet实现，核心逻辑一致，都是在独立音频线程中处理实时音频帧。
• 如果你需要获取视频对应的完整静态音频缓冲区（用于离线分析、预剪辑等非实时场景），只能通过fetch拉取完整视频资源Blob，再调用decodeAudioData方法解码，没有办法从正在播放的video元素中直接导出已经解码完成的全量AudioBuffer。

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