Audio- und Videowiedergabe im Web synchronisieren

Das Web Audio API ermöglicht eine ordnungsgemäße AV-Synchronisierung.

François Beaufort

Das Attribut outputLatency einer AudioContext-Instanz liefert eine Schätzung der Ausgabelatenz der Audiohardware, z. B. die von Bluetooth-Kopfhörern oder einer externen USB-Audioschnittstelle. Diese Eigenschaft ist in folgenden Fällen nützlich:

• Synchronisieren Sie das vorhandene Audiomaterial und das neu aufgenommene Material. (in einem Musikproduktionsszenario)
• Synchronisiere die Web Audio-Ausgabe und andere Medien (z.B. Video- oder MIDI-Wiedergabe).

In dieser WebCodecs-Demo (Quelle) wird mithilfe der WebCodecs API ein MediaStream in Video- und Audiodaten decodiert. Anschließend wird es in ein HTML-<canvas>-Element wiedergegeben, dessen Audiodaten aus einem Audio-Worklet stammen. Mit der Eigenschaft outputLatency kann die Demo feststellen, wann ein bestimmter Audio-Zeitstempel die Ohren des Nutzers erreicht, und Videoframes dann entsprechend zeichnen.

Probiere es selbst aus, spiele das Video mit deinem Lieblings-Bluetooth-Headset (⋮), warte auf den Vogel (📣) (siehe oben) und setze das Kästchen ein (Avg️), um Änderungen bei der Audiowiedergabe zu beobachten. Der Wert für die gesamte Ausgabelatenz wird in Echtzeit aktualisiert.

Audiokontext-Ausgabelatenz

Hero-Image von Wahid Khene auf Unsplash