Menyinkronkan pemutaran audio dan video di web

Web Audio API memungkinkan sinkronisasi AV dilakukan dengan benar.

Prancis Beaufort
François Beaufort

Properti outputLatency dari instance AudioContext memberikan perkiraan latensi output hardware audio (misalnya, earbud Bluetooth atau antarmuka audio USB eksternal). Properti ini berguna saat Anda ingin:

  • Menyinkronkan materi audio yang ada dan materi yang baru direkam. (dalam skenario produksi musik)
  • Menyinkronkan output Web Audio dan media lainnya (misalnya pemutaran video atau MIDI).

Dalam demo WebCodecs (sumber) ini, WebCodecs API digunakan untuk mendekode MediaStream ke data video dan audio mentah, lalu diputar kembali menjadi elemen <canvas> HTML dengan data audio yang berasal dari Audio Worklet. Properti outputLatency memungkinkan demo menentukan kapan stempel waktu audio tertentu mencapai telinga pengguna, lalu menggambar frame video dengan benar agar sesuai.

Screenshot demo, yang merupakan video tersemat dengan kontrol audio untuk volume, kondisi buffer audio, total latensi output, dan kotak centang untuk menggunakan AudioContext.outputLatency.

Cobalah sendiri, putar video dengan headset Bluetooth favorit Anda (desain), tunggu burung (Panduan ) (lihat di atas ), dan aktifkan kotak centang (☑️) untuk mengamati perubahan pemutaran audio. Nilai latensi output total diperbarui secara real time.

OutputLatensi Audio

Dukungan Browser

  • 102
  • 102
  • 70
  • x

Sumber

Banner besar oleh Wahid Khene di Unsplash.