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

Web Audio API ช่วยให้สามารถทำการซิงโครไนซ์ AV ได้อย่างถูกต้อง

François Beaufort

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

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

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

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

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

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