Synchronizuj odtwarzanie dźwięku i obrazu w internecie

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

François Beaufort
François Beaufort

Właściwość outputLatency instancji AudioContext podaje oszacowanie opóźnienia wyjściowego sprzętu audio (np. w przypadku 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. (na potrzeby produkcji muzyki)
  • Zsynchronizuj wyjście Web Audio i inne multimedia (np. odtwarzanie wideo lub MIDI).

W tej wersji demonstracyjnej WebCodecs (źródło) interfejs WebCodecs API jest używany do dekodowania MediaStream na nieprzetworzone dane wideo i audio, a następnie odtwarzanie ich 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 dźwięku dociera do uszu użytkownika, a następnie prawidłowo malować klatki w filmie, by dopasować je do tych danych.

Zrzut ekranu przedstawiający umieszczony film z elementami sterującymi głośnością, stanem bufora dźwięku, całkowitym czasem oczekiwania oraz polem wyboru do użycia elementu AudioContext.outputLatency.

Sprawdź, jak to działa. Odtwórz film za pomocą ulubionego zestawu słuchawkowego Bluetooth (🎧), poczekaj na ptaka (🐦) (patrz powyżej) i zaznacz pole wyboru (Zaznacz️), aby obserwować zmiany w odtwarzaniu dźwięku. Wartość łącznego czasu oczekiwania na wyjście jest aktualizowana w czasie rzeczywistym.

Czas oczekiwania na dane wyjściowe w kontekście audio

Obsługa przeglądarek

  • 102
  • 102
  • 70
  • x

Źródło

Baner powitalny Wahida Khene z filmu Unsplash.