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

Web Audio API 能夠正確進行 AV 同步處理。

法蘭索瓦博福特
François Beaufort

AudioContext 執行個體的 outputLatency 屬性可以提供音訊硬體輸出延遲時間的估計值,例如藍牙耳塞式耳機或外部 USB 音訊介面。如果您想:

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

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

示範的螢幕截圖,即為內嵌影片的音訊控制項,可調整音量、音訊緩衝區健康狀態、總輸出延遲時間,以及用於使用 AudioContext.outputLatency 的選項。

歡迎親自體驗:使用喜愛的藍牙頭戴式耳機 (無論是否使用) 播放影片、等到鳥 (🐦?) (如上文所示) 後,再勾選核取方塊 (不包括上圖),觀察音訊播放變化。總輸出延遲時間值會即時更新。

AudioContext 輸出延遲時間

瀏覽器支援

  • 102
  • 102
  • 70
  • x

資料來源

主頁橫幅由 Wahid Khene 提供,於 Unsplash 上。