Synchronize audio and video playback on the web

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

Synchronize the ex…


This content originally appeared on web.dev and was authored by François Beaufort

The outputLatency property of an AudioContext instance provides an estimate of audio hardware's output latency (for example, that of Bluetooth earbuds or of an external USB audio interface). This property is useful when you want to:

  • Synchronize the existing audio material and the newly recorded material. (in a music production scenario)
  • Synchronize the Web Audio output and other media (e.g. video or MIDI playback).

In this WebCodecs demo (source), the WebCodecs API is used to decode a MediaStream into raw video and audio data, and then played back into a HTML <canvas> element with audio data coming from an Audio Worklet. The outputLatency property allows the demo to determine when a given audio timestamp is reaching 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 it out for yourself, play the video with your favorite Bluetooth headset (🎧), wait for the bird (🐦) (see above), and toggle the checkbox (☑️) to observe audio playback changes. The total output latency value is updated in real time.

AudioContext outputLatency #

Browser support: chrome, Not supported × firefox 70, Supported 70 edge, Not supported × safari, Not supported × Source

Hero image by Wahid Khene on Unsplash.


This content originally appeared on web.dev and was authored by François Beaufort


Print Share Comment Cite Upload Translate Updates
APA

François Beaufort | Sciencx (2022-06-01T00:00:00+00:00) Synchronize audio and video playback on the web. Retrieved from https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/

MLA
" » Synchronize audio and video playback on the web." François Beaufort | Sciencx - Wednesday June 1, 2022, https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/
HARVARD
François Beaufort | Sciencx Wednesday June 1, 2022 » Synchronize audio and video playback on the web., viewed ,<https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/>
VANCOUVER
François Beaufort | Sciencx - » Synchronize audio and video playback on the web. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/
CHICAGO
" » Synchronize audio and video playback on the web." François Beaufort | Sciencx - Accessed . https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/
IEEE
" » Synchronize audio and video playback on the web." François Beaufort | Sciencx [Online]. Available: https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/. [Accessed: ]
rf:citation
» Synchronize audio and video playback on the web | François Beaufort | Sciencx | https://www.scien.cx/2022/06/01/synchronize-audio-and-video-playback-on-the-web/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.