Sincronizzare la riproduzione di audio e video sul Web

L'API Web Audio consente di ottenere correttamente la sincronizzazione AV.

François Beaufort
François Beaufort

La proprietà outputLatency di un'istanza AudioContext fornisce una stima della latenza di uscita dell'hardware audio (ad esempio, quella degli auricolari Bluetooth o di un'interfaccia audio USB esterna). Questa proprietà è utile quando vuoi:

  • Sincronizza il materiale audio esistente con il materiale appena registrato. (in uno scenario di produzione musicale)
  • Sincronizza l'output Web Audio e gli altri contenuti multimediali (ad esempio riproduzione video o MIDI).

In questa demo WebCodecs (fonte), l'API WebCodecs viene utilizzata per decodificare un MediaStream in dati video e audio non elaborati, quindi riprodotti in un elemento HTML <canvas> con dati audio provenienti da un worklet audio. La proprietà outputLatency consente alla demo di determinare quando un determinato timestamp audio raggiunge le orecchie dell'utente e quindi di visualizzare correttamente i fotogrammi video in modo che corrispondano.

Uno screenshot della demo, che consiste in un video incorporato con controlli audio per il volume, l&#39;integrità del buffer audio, la latenza di output totale e una casella di controllo per utilizzare AudioContext.outputLatenza.

Provala in prima persona, riproduci il video con le tue cuffie Bluetooth preferite (🗣), aspetta l'uccello (price) (vedi sopra) e attiva/disattiva la casella di controllo (↗️) per osservare i cambiamenti della riproduzione audio. Il valore della latenza totale dell'output viene aggiornato in tempo reale.

Latenza output AudioContext

Supporto dei browser

  • 102
  • 102
  • 70
  • x

Origine

Immagine hero di Wahid Khene su Unsplash.