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

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

François Beaufort
François Beaufort
GitHub

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

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

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

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

亲自尝试一下，使用您最喜爱的蓝牙耳机 (="#") 播放视频，等待小鸟 (🐦?)（见上文），切换复选框 (过滤) 来观察音频播放变化。总输出延迟时间值会实时更新。

AudioContext outputLatency

浏览器支持

  • 102
  • 102
  • 70
  • x

来源

Wahid Khene 拍摄的 Unspin 中的主打图片。