Synchronize audio and video clip playback on the web

The outputLatency property of an AudioContext instance provides an estimate of audio hardware’s output latency (for illustration, that of Bluetooth earbuds or of an exterior USB audio interface). This assets is handy when you want to:

• Synchronize the current audio content and the recently recorded content. (in a tunes output circumstance)
• Synchronize the Website Audio output and other media (e.g. video clip or MIDI playback).

In this WebCodecs demo (supply), the WebCodecs API is utilised to decode a MediaStream into raw online video and audio info, and then played back again into a HTML <canvas> component with audio data coming from an Audio Worklet. The outputLatency home enables the demo to establish when a presented audio timestamp is achieving the user’s ears and then properly paint video frames to match that.

Try out it out for oneself, perform the movie with your favourite Bluetooth headset (🎧), hold out for the chook (🐦) (see higher than), and toggle the checkbox (☑️) to observe audio playback changes. The full output latency value is updated in authentic time.

AudioContext outputLatency #

Hero graphic by Wahid Khene on Unsplash.