ウェブでの音声と動画の再生を同期する

Web Audio API を使用すると、AV 同期を適切に行うことができます。

François Beaufort
François Beaufort

AudioContext インスタンスの outputLatency プロパティは、オーディオ ハードウェアの出力レイテンシ(Bluetooth イヤホンや外部 USB オーディオ インターフェースなど)の推定値を提供します。このプロパティは次のような場合に役立ちます。

  • 既存の音声素材と新しく録音された素材を同期します。(音楽制作のシナリオ)
  • ウェブ オーディオ出力と他のメディア(動画や MIDI 再生など)を同期します。

この WebCodecs デモソース)では、WebCodecs API を使用して MediaStream を未加工の動画データと音声データにデコードし、音声ワークレットからの音声データを含む <canvas> HTML 要素に再生します。outputLatency プロパティを使用すると、デモで特定の音声タイムスタンプがユーザーの耳に届くタイミングを判断し、それに合わせて動画フレームを適切に描画できます。

デモのスクリーンショット。埋め込み動画には、音量、オーディオ バッファの状態、合計出力レイテンシのオーディオ コントロールと、AudioContext.outputLatency を使用するためのチェックボックスが表示されている。

実際に試してみて、お気に入りの Bluetooth ヘッドセット(🇨?)で動画を再生し、鳥(YOUTUBE)(上記を参照)を待ち(上記を参照)、チェックボックス(Λ)を切り替えて音声の再生の変化を観察してください。合計出力レイテンシの値はリアルタイムで更新されます。

AudioContext の出力レイテンシ

対応ブラウザ

  • 102
  • 102
  • 70
  • x

ソース

ヒーロー画像: Wahid KheneUnsplash より