Synchronize audio and video playback on the web

The Web Audio API makes it possible to properly achieve AV synchronization.

W

web.devweb.dev

·

Synchronize audio and video playback on the web

The Web Audio API enables proper audio-video synchronization, and the outputLatency property of an AudioContext instance is the key. This property provides an estimate of the audio hardware's output latency, whether from Bluetooth earbuds or an external USB audio interface.

The outputLatency property is particularly useful in two scenarios: synchronizing existing audio with newly recorded material in a music production context, and synchronizing Web Audio output with other media such as video or MIDI playback.

A WebCodecs demo (with source code) illustrates this concept in practice. The demo uses the WebCodecs API to decode a MediaStream into raw video and audio data, then plays it into an HTML <canvas> element, with audio coming from an Audio Worklet. The outputLatency property lets the demo determine exactly when a given audio timestamp reaches the user's ears, allowing it to paint video frames in sync with what is actually heard.

You can test this yourself: play the video with Bluetooth headphones, wait for the bird to appear, and toggle the checkbox to observe the audio playback changes. The total output latency value updates in real time.