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

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

Francisco 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 los auriculares Bluetooth o la de una interfaz de audio USB externa). Esta propiedad es útil cuando quieres hacer lo siguiente:

  • Sincroniza el material de audio existente y el material recién grabado. (en un escenario de producción musical)
  • Sincroniza la salida de Web Audio y otros medios (p.ej., reproducción de video o MIDI).

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

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 de salida total y una casilla de verificación para usar AudioContext.outputLatency.

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

AudioContext outputLatency

Navegadores compatibles

  • 102
  • 102
  • 70
  • x

Origen

Hero image de Wahid Khene en Unsplash.