同步處理網路上的音訊和視訊播放

Web Audio API 可正確執行 AV 同步處理。

François Beaufort
François Beaufort

AudioContext 執行個體的 outputLatency 屬性提供音訊硬體輸出延遲時間 (例如藍牙耳機或外部 USB 音訊介面) 的預估延遲時間。需要進行下列操作時,這個屬性就非常實用:

  • 同步處理現有的音訊內容和新錄製的資料。(在音樂製作情境中)
  • 同步處理網路音訊輸出和其他媒體 (例如播放影片或 MIDI 播放)。

在這個 WebCodecs 示範 (資料來源) 中,WebCodecs API 用於將 MediaStream 解碼為原始影片和音訊資料,然後透過 Audio Worklet 提供的音訊資料,播放回 HTML <canvas> 元素中。outputLatency 屬性可讓示範判斷特定音訊時間戳記何時達到使用者耳朵,然後正確繪製影片影格以符合該情況。

示範畫面的螢幕截圖,當中有內嵌影片,且有音量、音訊緩衝區健康、總輸出延遲時間,以及使用 AudioContext.outputLatency 的核取方塊。

你可以親自嘗試,使用你最愛的藍牙耳機 (⁂) 播放影片、等待小鳥 (🐦?) (請見上方說明),然後勾選核取方塊 (標題️),觀察音訊播放變化的情況。總輸出延遲值會即時更新。

音訊內容輸出延遲時間

瀏覽器支援

  • 102
  • 102
  • 70
  • x

來源

主頁橫幅由 Wahid KheneUnsplash 提供。