Menyinkronkan pemutaran audio dan video di web

Web Audio API memungkinkan sinkronisasi AV dengan benar.

François Beaufort

Properti outputLatency dari instance AudioContext memberikan perkiraan latensi output hardware audio (misalnya, latensi output hardware audio 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 Audio Web dan media lainnya (misalnya pemutaran video atau MIDI).

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

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

OutputLatensi AudioContext

Banner besar oleh Wahid Khene di Unsplash.