如何使用Web Audio API获取HTML5 video元素已缓冲的音频PCM数据

核心逻辑 #

不需要手动读取video元素的底层缓冲数据，浏览器已经完成了流媒体的解封装、音频解码操作，直接通过Web Audio API绑定video元素即可获取实时PCM数据，兼容YouTube的分片加载缓冲逻辑，同时适配你已经熟悉的AudioBuffer相关操作。

具体实现步骤（可直接在控制台注入运行） #

• 初始化AudioContext实例，CEF环境下如果上下文处于暂停状态，可主动调用resume激活

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
if (audioCtx.state === 'suspended') audioCtx.resume();

• 获取YouTube页面的video元素

const videoEl = document.querySelector('video.html5-main-video');

• 挂载视频音频流到AudioContext

const sourceNode = audioCtx.createMediaElementSource(videoEl);

• 注册音频处理节点获取PCM数据，以下用ScriptProcessorNode做示例，适合快速测试：

// 缓冲区大小可根据可视化精度调整，可选值为2的幂：256/512/1024/2048/4096/8192/16384
const processor = audioCtx.createScriptProcessor(4096, 2, 2);
processor.onaudioprocess = (e) => {
  // 获取左右声道PCM数据，格式为Float32Array，数值范围[-1, 1]
  const leftChannel = e.inputBuffer.getChannelData(0);
  const rightChannel = e.inputBuffer.getChannelData(1);
  
  // 此处填写你的音频可视化逻辑，可直接将PCM数据导入你已有的AudioBuffer处理流程
  // ...
  
  // 将音频数据回写至输出端，保证视频正常发声
  e.outputBuffer.copyToChannel(leftChannel, 0);
  e.outputBuffer.copyToChannel(rightChannel, 1);
};

• 串联音频节点，完成链路搭建

sourceNode.connect(processor);
processor.connect(audioCtx.destination);

CEF环境&缓冲数据特殊处理说明 #

• 若需要获取已缓冲但未播放的音频段PCM，可先通过videoEl.buffered属性获取缓冲时间范围：const bufferedEnd = videoEl.buffered.end(videoEl.buffered.length - 1)，主动跳转currentTime到对应缓冲段，即可抓取对应时间段的PCM数据
• 确认CEF编译时开启了Web Audio支持，常规发行版CEF默认已开启该能力
• DRM加密的版权内容可能无法获取PCM数据，无版权公开内容无此限制

常见问题排查 #

• 若音频无输出或拿不到PCM，检查节点连接顺序是否正确，SourceNode必须先连接处理器再连接输出端
• 不要重复为同一个video创建MediaElementSourceNode，已绑定过的节点会自动失效

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