Synchroniser la lecture audio et vidéo sur le Web

L'API Web Audio permet d'obtenir 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 d'écouteurs Bluetooth ou d'une interface audio USB externe). Cette propriété est utile lorsque vous souhaitez:

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

Dans cette démonstration WebCodecs (source), l'API WebCodecs permet de décoder un élément MediaStream en données audio et vidéo brutes, puis de le lire dans un élément HTML <canvas> avec des données audio provenant d'un Worklet audio. La propriété outputLatency permet à la démonstration de déterminer à quel moment un horodatage donné du contenu audio arrive dans 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 de la mémoire tampon audio, la latence de sortie totale et une case à cocher permettant d&#39;utiliser AudioContext.outputLatency.

Essayez par vous-même, lancez la lecture de la vidéo avec votre casque Bluetooth favori (TalkBack), attendez l'oiseau (comme illustré ci-dessus) et cochez la case (➔️) pour observer les changements de lecture audio. La valeur totale de la 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.