ブラウザでの動画再生と音声API｜HTML5 VideoとWeb Audio APIの連携

HTML5のvideo要素（<video>タグ）は、ブラウザ内でネイティブに動画を再生できる標準要素です。src属性でMP4・WebM・OGGの動画ファイルを指定でき、controls属性で再生コントロールを表示します。プロパティ（currentTime・duration・paused・volume等）とメソッド（play()・pause()・load()等）をJavaScriptから操作できます。

ブラウザのvideo要素はGPUアクセラレーションを使って効率的に動画をデコード・表示します。対応コーデックはブラウザによって異なりますが、Chrome・Firefox・Safari・EdgeはすべてH.264（AVC）とAACのMP4を再生できます。MediaSource Extensions（MSE）を使うことで、JavaScriptから動的に動画ストリームを構築することも可能です。

MediaElementAudioSourceNodeはHTML5のvideo/audio要素をWeb Audio APIのグラフに接続するためのノードです。const audioCtx = new AudioContext(); const source = audioCtx.createMediaElementSource(videoElement); という形で、video要素の音声出力をWeb Audio APIのノードとして取り込めます。

この接続により、ブラウザで再生中の動画の音声にリアルタイムでEQ・コンプレッサーなどのWeb Audio APIエフェクトを適用できます。VideoAudioTuneのリアルタイムプレビュー機能はこの仕組みを使って、動画再生中のプリセット変更をリアルタイムで反映します。

Web Audio APIには通常のリアルタイム処理を行うAudioContextと、オフライン（非リアルタイム）でバッファを処理するOfflineAudioContextがあります。OfflineAudioContextは「レンダリング（オフスクリーンレンダリング）」とも呼ばれ、音声バッファを指定した時間分まとめて処理して結果を返します。

VideoAudioTuneではExport処理にOfflineAudioContextを使用しています。動画から抽出したWAV音声をAudioBufferとしてデコードし、EQプリセットのフィルターチェーンとコンプレッサーを適用してOfflineAudioContextでレンダリングします。リアルタイムのオーディオスレッドを使わないため、処理速度が向上し、音声の長さに比例した時間で処理が完了します。

VideoAudioTuneがブラウザでローカルファイルを扱えるのはFile APIのおかげです。<input type="file">要素でユーザーが選択したファイルはFileオブジェクトとしてJavaScriptに渡されます。このFileオブジェクトからArrayBufferを生成し、ffmpeg.wasmに渡して処理します。

処理後のMP4データはUint8ArrayまたはBlobとして生成され、URL.createObjectURL(blob)でBlobURLを作成します。このBlobURLをaタグのhref属性に設定してダウンロードリンクとします。このダウンロードリンクをクリックするとブラウザが内部のBlobデータをローカルのファイルとして保存します。データがサーバーを経由しないため、プライバシーが保護されます。

VideoAudioTuneが使用する主な技術（Web Audio API・File API・WebAssembly・OfflineAudioContext）のブラウザ互換性をまとめます。PC版Chrome・Edge（Chromiumベース）：すべての機能が完全にサポートされています。最も安定した動作が期待できます。PC版Firefox：Web Audio API・WebAssembly・File APIはサポートされています。一部のオーディオ処理に違いがある場合があります。PC版Safari：基本機能はサポートされていますが、特定のオーディオ処理（SharedArrayBuffer等）に制限がある場合があります。

iOS Safari：SharedArrayBufferの使用に制限があり、ffmpeg.wasmがシングルスレッドモードで動作する場合があります。処理速度が大幅に低下するほか、一部の機能が動作しない可能性があります。Android Chrome：PC版Chromeと同等のサポートです。VideoAudioTuneのPC Chrome・Edge推奨はこれらの互換性状況を踏まえたものです。