在网页上同步音频和视频播放

Web Audio API 可以正确实现 AV 同步。

弗朗索瓦·博福
François Beaufort
GitHub

AudioContext 实例的 outputLatency 属性用于估算音频硬件的输出延迟（如蓝牙耳机或外部 USB 音频接口的延迟）。如果您想执行以下操作，则此属性非常有用：

  • 同步现有的音频资料和新录制的音频资料。（在音乐制作场景中）
  • 同步网络音频输出和其他媒体（例如视频或 MIDI 播放）。

在此 WebCodecs 演示（源代码）中，WebCodecs API 用于将 MediaStream 解码为原始视频和音频数据，然后使用来自 Audio Worklet 的音频数据回放到 HTML <canvas> 元素中。借助 outputLatency 属性，演示可以确定给定音频时间戳何时到达用户耳朵，然后正确绘制视频帧以匹配该时间戳。

该演示的屏幕截图，其中包含一个嵌入式视频，其中包含音量、音频缓冲区运行状况、总输出延迟时间以及使用 AudioContext.outputLatency 的复选框。

亲自尝试一下，使用你喜欢的蓝牙耳机 (☰) 播放视频，等待小鸟 (将会🐦?)（参见上文），然后切换复选框 (ou️) 观察音频播放的变化。总输出延迟时间值会实时更新。

AudioContext 输出延迟时间

浏览器支持

  • 102
  • 102
  • 70
  • x

来源

主打图片由 Wahid Khene 创作，选自 Unsplash 网站。