Sincronizzare la riproduzione di audio e video sul Web

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

Francesco 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 quello appena registrato. (in uno scenario di produzione musicale)
  • Sincronizza l'uscita Web Audio e altri contenuti multimediali (ad esempio, la riproduzione di video o MIDI).

In questa demo di WebCodecs (fonte), l'API WebCodecs viene utilizzata per decodificare un elemento MediaStream in dati video e audio non elaborati, quindi viene riprodotta in un elemento <canvas> HTML 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 dipingere correttamente i frame video di conseguenza.

Uno screenshot della demo, che mostra un video incorporato con controlli audio per volume, integrità del buffer audio, latenza di output totale e una casella di controllo per utilizzare AudioContext.outputLatenza.

Fai una prova, riproduci il video con le tue cuffie Bluetooth preferite (ICANN), attendi che l'uccello (lascia ) (vedi sopra) e attiva/disattiva la casella di controllo (↑️) per osservare i cambiamenti nella riproduzione dell'audio. Il valore della latenza totale dell'output viene aggiornato in tempo reale.

Latenza output AudioContext

Supporto dei browser

  • 102
  • 102
  • 70
  • x

Fonte

Immagine hero di Wahid Khene su Unsplash.