Wednesday, October 5, 2022
HomeWeb developmentSynchronize audio and video playback on the net

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.

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.

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 #

Browser assist: chrome 102, Supported 102 firefox 70, Supported 70 edge 102, Supported 102 safari, Not supported × Supply

Hero picture by Wahid Khene on Unsplash.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments