API веб-аудио позволяет правильно добиться AV-синхронизации.
Свойство outputLatency
экземпляра AudioContext
предоставляет оценку задержки вывода аудиооборудования (например, наушников Bluetooth или внешнего аудиоинтерфейса USB). Это свойство полезно, если вы хотите:
- Синхронизируйте существующий аудиоматериал и вновь записанный материал. (в сценарии музыкального производства)
- Синхронизируйте вывод веб-аудио и других медиафайлов (например, видео или воспроизведения MIDI).
В этой демонстрации WebCodecs ( источник ) API WebCodecs используется для декодирования MediaStream
в необработанные видео- и аудиоданные, а затем воспроизводится в HTML-элемент <canvas>
с аудиоданными, поступающими из Audio Worklet . Свойство outputLatency
позволяет демо-версии определять, когда заданная временная метка звука достигает ушей пользователя, а затем правильно рисовать видеокадры в соответствии с ней.

Попробуйте сами, воспроизведите видео с помощью любимой Bluetooth-гарнитуры (🎧), дождитесь птицы (🐦) (см. выше) и установите флажок (☑️), чтобы наблюдать за изменениями при воспроизведении звука. Общее значение выходной задержки обновляется в режиме реального времени.
Задержка вывода аудиоконтекста
Изображение героя, созданное Вахидом Хене на Unsplash .