ซิงค์ข้อมูลการเล่นเสียงและวิดีโอบนเว็บ

Web Audio API ทำให้สามารถซิงค์ AV ได้อย่างเหมาะสม

François Beaufort

พร็อพเพอร์ตี้ outputLatency ของอินสแตนซ์ AudioContext จะระบุเวลาในการตอบสนองของเอาต์พุตของฮาร์ดแวร์เสียงโดยประมาณ (เช่น ค่าของหูฟังเอียร์บัดบลูทูธหรืออินเทอร์เฟซเสียง USB ภายนอก) พร็อพเพอร์ตี้นี้มีประโยชน์เมื่อคุณต้องการทำสิ่งต่อไปนี้

• ซิงค์ข้อมูลเนื้อหาเสียงที่มีอยู่กับเนื้อหาเสียงที่บันทึกไว้ใหม่ (ในสถานการณ์การผลิตเพลง)
• ซิงค์เอาต์พุต Web Audio และสื่ออื่นๆ (เช่น การเล่นวิดีโอหรือ MIDI)

ในการสาธิต WebCodecs นี้ (แหล่งที่มา) WebCodecs API จะใช้เพื่อถอดรหัส MediaStream เป็นข้อมูลดิบของวิดีโอและเสียง จากนั้นเล่นกลับไปยังองค์ประกอบ HTML <canvas> ที่มีข้อมูลเสียงจาก Audio Worklet พร็อพเพอร์ตี้ outputLatency ช่วยให้เดโมระบุได้ว่าเมื่อใดที่การประทับเวลาของเสียงส่งไปถึงหูของผู้ใช้ จากนั้นจึงระบายสีเฟรมวิดีโอให้ตรงกับเวลาดังกล่าว

ลองด้วยตัวคุณเอง เล่นวิดีโอด้วยชุดหูฟังบลูทูธที่คุณชื่นชอบ (ASSET) รอนก (🐦) (ดูด้านบน) แล้วสลับช่องทำเครื่องหมาย (☑️) เพื่อสังเกตการเปลี่ยนแปลงการเล่นเสียง ค่าเวลาในการตอบสนองเอาต์พุตทั้งหมดจะอัปเดตแบบเรียลไทม์

เวลาในการตอบสนองเอาต์พุตของ AudioContext

รูปภาพหลักโดย Wahid Khene ใน Unsplash