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 gibt eine Schätzung der Ausgabelatenz der Audiohardware an, z. B. der 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 aufgezeichnete Material. (in einem Musikproduktionsszenario)
• Synchronisieren Sie die Web Audio-Ausgabe und andere Medien (z.B. Video- oder MIDI-Wiedergabe).

In dieser WebCodecs-Demo (Quelle) wird die WebCodecs API verwendet, um ein MediaStream in Roh-Video- und Audiodaten zu decodieren und dann mit Audiodaten aus einem Audio-Worklet in ein HTML-<canvas>-Element wiederzugeben. Mit der Eigenschaft outputLatency kann die Demo feststellen, wann ein bestimmter Audiozeitstempel das Ohr des Nutzers erreicht, und die Videoframes dann entsprechend darstellen.

Probiere es selbst aus, spiele das Video mit deinem Lieblings-Bluetooth-Headset (ldap) ab, warte auf den Vogel (COVID-19) (siehe oben) und aktiviere das Kästchen (Ю️), um Veränderungen bei der Audiowiedergabe zu beobachten. Der Wert für die gesamte Ausgabelatenz wird in Echtzeit aktualisiert.

Latenz der AudioContext-Ausgabe

Hero-Image von Wahid Khene auf Unsplash