Synchronizuj odtwarzanie dźwięku i obrazu w internecie

Interfejs Web Audio API umożliwia prawidłową synchronizację dźwięku z dźwiękiem.

Anna Beaufort
François Beaufort

Właściwość outputLatency instancji AudioContext podaje szacowane opóźnienie wyjściowe sprzętu audio (np. słuchawek dousznych Bluetooth lub zewnętrznego interfejsu audio USB). Ta właściwość jest przydatna, gdy chcesz:

  • Zsynchronizuj istniejący materiał audio z nowo nagranym materiałem. (w scenariuszu produkcji muzycznej)
  • Synchronizuj wyjście Web Audio i inne multimedia (np. odtwarzanie wideo lub MIDI).

W tej prezentacji WebCodecs (źródło) interfejs API WebCodecs jest używany do dekodowania elementu MediaStream w postaci nieprzetworzonych danych wideo i audio, a następnie odtwarzany w elemencie HTML <canvas> z danymi dźwiękowymi pochodzącymi z Workletu audio. Właściwość outputLatency pozwala wersji demonstracyjnej określić, kiedy dana sygnatura czasowa audio dociera do uszu użytkownika, a następnie odpowiednio malować klatki wideo, aby ją dopasować.

Zrzut ekranu z prezentacją: umieszczony w filmie film z elementami sterującymi głośnością, stanem bufora dźwięku, całkowitym opóźnieniem wyjścia oraz polem wyboru AudioContext.outputLatency.

Sprawdź to na własne oczy, włącz film na swoim ulubionym zestawie słuchawkowym Bluetooth (🎧), poczekaj na ptaka (🐦) (patrz wyżej), a potem zaznacz pole wyboru (✔️), aby obserwować zmiany w odtwarzaniu dźwięku. Całkowity czas oczekiwania na wyjściu jest aktualizowany w czasie rzeczywistym.

Czas oczekiwania na dane wyjściowe elementu AudioContext

Obsługa przeglądarek

  • 102
  • 102
  • 70
  • x

Źródło

Baner powitalny autorstwa Wahida Khene w filmie Unsplash.