Sincroniza la reproducción de audio y video en la Web

La API de Web Audio permite lograr correctamente la sincronización de AV.

François Beaufort
François Beaufort

La propiedad outputLatency de una instancia de AudioContext proporciona una estimación de la latencia de salida del hardware de audio (por ejemplo, la de auriculares Bluetooth o una interfaz de audio USB externa). Esta propiedad es útil cuando quieres hacer lo siguiente:

  • Sincroniza el material de audio existente y el material grabado recientemente. (en una situación de producción musical)
  • Sincroniza la salida de Audio web y otro contenido multimedia (p.ej., la reproducción de video o MIDI).

En esta demostración de WebCodecs (fuente), se usa la API de WebCodecs para decodificar un MediaStream en datos de video y audio sin procesar y, luego, se reproduce en un elemento <canvas> de HTML con datos de audio provenientes de un Worklet de audio. La propiedad outputLatency permite que la demostración determine cuándo llega una marca de tiempo de audio determinada a los oídos del usuario y, luego, pinte los fotogramas de video correctamente para que coincidan.

Una captura de pantalla de la demostración, que es de un video incorporado con controles de audio para el volumen, el estado del búfer de audio, la latencia total de salida y una casilla de verificación para usar AudioContext.outputLatency.

Pruébala por tu cuenta, reproduce el video con tus auriculares Bluetooth favoritos (DD), espera al pájaro (armeabi) (ver arriba) y activa la casilla de verificación (☑️) para observar los cambios en la reproducción de audio. El valor total de la latencia de salida se actualiza en tiempo real.

Latencia de salida de AudioContext

Navegadores compatibles

  • 102
  • 102
  • 70,000
  • x

Origen

Hero image de Wahid Khene en Unsplash.