Synchronize audio and video clip playback on the web


Web Development


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.

A screenshot of the demo, which is of an embedded video with audio controls for volume, audio buffer health, total output latency, and a checkbox to use AudioContext.outputLatency.

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 #

Browser help: chrome, Not supported × firefox 70, Supported 70 edge, Not supported × safari, Not supported × Resource

Hero graphic by Wahid Khene on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked *