Synchronize audio and video playback on the net

The outputLatency property of an AudioContext occasion gives an estimate of audio {hardware}’s output latency (for instance, that of Bluetooth earbuds or of an exterior USB audio interface). This property is beneficial whenever you wish to:

• Synchronize the prevailing audio materials and the newly recorded materials. (in a music manufacturing situation)
• Synchronize the Internet Audio output and different media (e.g. video or MIDI playback).

On this WebCodecs demo (supply), the WebCodecs API is used to decode a MediaStream into uncooked video and audio knowledge, after which performed again right into a HTML &LTcanvas> aspect with audio knowledge coming from an Audio Worklet. The outputLatency property permits the demo to find out when a given audio timestamp is reaching the consumer’s ears after which correctly paint video frames to match that.

Strive it out for your self, play the video together with your favourite Bluetooth headset (🎧), look ahead to the chicken (🐦) (see above), and toggle the checkbox (☑️) to watch audio playback modifications. The whole output latency worth is up to date in actual time.

AudioContext outputLatency #

Hero picture by Wahid Khene on Unsplash.