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

A API de áudio da Web possibilita a sincronização AV de forma adequada.

Francisco 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, de 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, reproduzi-los 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 do áudio está chegando aos ouvidos do usuário e, em seguida, pinte corretamente os frames do vídeo para corresponder a isso.

Uma captura de tela da demonstração, que mostra 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.

Experimente você mesmo, reproduza o vídeo com seu fone de ouvido Bluetooth favorito (colete), espere o pássaro (terraform) (veja acima) e alterne a caixa de seleção (🔔️) para observar as mudanças na reprodução de áudio. O valor total da latência de saída é atualizado em tempo real.

Latência de saída do AudioContext

Compatibilidade com navegadores

  • 102
  • 102
  • 70
  • x

Origem

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