Sincronizar reprodução de áudio e vídeo na Web

A API de áudio da Web possibilita obter corretamente a sincronização AV.

François Beaufort
François Beaufort

A propriedade outputLatency de uma instância AudioContext fornece uma estimativa da latência de saída do hardware de áudio (por exemplo, a dos fones de ouvido Bluetooth ou de uma interface de áudio USB externa). Essa propriedade é útil quando você quer:

  • Sincronize o material de áudio existente e o material recém-gravado. (em um cenário de produção musical)
  • Sincronize a saída de Web Audio e outras mídias (por exemplo, reprodução de vídeo ou MIDI).

Nesta demonstração do WebCodecs (fonte), a API WebCodecs é usada para decodificar um MediaStream em dados brutos de vídeo e áudio e, em seguida, reproduzido em um elemento HTML <canvas> com dados de áudio provenientes de um worklet de áudio. A propriedade outputLatency permite que a demonstração determine quando um determinado carimbo de data/hora de áudio está chegando aos ouvidos do usuário e, em seguida, pinte os frames do vídeo para corresponder a isso.

Uma captura de tela da demonstração de um vídeo incorporado com controles de áudio para volume, integridade do buffer de áudio, latência total de saída e uma caixa de seleção para usar AudioContext.outputLatency.

Faça um teste, reproduza o vídeo com seu fone de ouvido Bluetooth favorito (smtp), aguarde o pássaro (tunnel) (veja acima) e marque a caixa de seleção (trabalhoso) para observar as mudanças na reprodução do áudio. O valor da latência total de saída é atualizado em tempo real.

Latência de saída do AudioContext

Compatibilidade com navegadores

  • 102
  • 102
  • 70
  • x

Origem

Imagem principal de Wahid Khene no Unsplash (links em inglês).