Synchroniser la lecture audio et vidéo sur le Web

L'API Web Audio permet d'effectuer correctement la synchronisation AV.

François Beaufort
François Beaufort

La propriété outputLatency d'une instance AudioContext fournit une estimation de la latence de sortie du matériel audio (par exemple, celle des écouteurs Bluetooth ou une interface audio USB externe). Cette propriété est utile lorsque vous souhaitez:

  • Synchronisez le contenu audio existant et le contenu nouvellement enregistré. (dans un scénario de production musicale)
  • Synchronisez la sortie audio Web et d'autres contenus multimédias (lecture vidéo ou MIDI, par exemple).

Dans cette démo WebCodecs (source), l'API WebCodecs permet de décoder un MediaStream en données audio et vidéo brutes, puis de le lire dans un élément <canvas> HTML avec des données audio provenant d'un Worklet audio. La propriété outputLatency permet à la démo de déterminer à quel moment un code temporel audio donné atteint les oreilles de l'utilisateur, puis de peindre correctement les images vidéo en conséquence.

Capture d&#39;écran de la démonstration, qui représente une vidéo intégrée avec des commandes audio pour le volume, l&#39;état du tampon audio, la latence totale de sortie et une case à cocher permettant d&#39;utiliser AudioContext.outputLatency.

Essayez par vous-même, lancez la vidéo avec votre casque Bluetooth préféré (Assurez-vous que l'ensemble de lecture est activé). Attendez de voir l'oiseau (réalité) (activité cylindre), puis cochez la case (toute️) pour observer les changements de lecture audio. La valeur totale de latence de sortie est mise à jour en temps réel.

Latence de sortie AudioContext

Navigateurs pris en charge

  • 102
  • 102
  • 70
  • x

Source

Image principale de Wahid Khene sur Unsplash.