Web Audio APIとは？ブラウザで音声処理を行う標準技術

Web Audio APIは「オーディオグラフ（Audio Graph）」という概念で音声処理を構成します。音声ソース（AudioBufferSourceNode等）から始まり、各種処理ノード（フィルター・コンプレッサー等）を経由して、最終出力（AudioContext.destination）に至る処理の流れを有向非循環グラフとして定義します。

中心となるオブジェクトはAudioContextです。すべての音声ノードはAudioContextから生成され、同じコンテキスト内で接続されます。AudioContextはサンプリングレートを管理しており、一般的には44.1kHzまたは48kHzで動作します。ノードを.connect()メソッドでつなぐことで、音声処理のパイプラインを構築できます。

AudioBufferSourceNode：PCM音声データ（AudioBuffer）を再生・処理するためのソースノードです。BiquadFilterNode：最も基本的な音声フィルターノードで、ローパス・ハイパス・バンドパス・ピーキング（EQ）・ローシェルフ・ハイシェルフなど8種類のフィルタータイプを持ちます。type・frequency・Q・gainパラメーターで特性を細かく制御できます。VideoAudioTuneのEQプリセットはこのBiquadFilterNodeを複数組み合わせて実装されています。

DynamicsCompressorNode：コンプレッサー処理を行うノードです。threshold（スレッショルド）・knee・ratio・attack・releaseパラメーターを持ち、Web Audio API標準のダイナミクス処理を実現します。GainNode：音量の増減を行う最もシンプルなノードで、gainパラメーターで倍率を設定します。AnalyserNode：リアルタイムで音声の周波数・時間領域データを取得できるノードで、スペクトラムアナライザーやオシロスコープの実装に使われます。VideoAudioTuneのライブ波形表示にもこのノードが活用されています。

VideoAudioTuneの音声処理フローは以下のように構成されています。ffmpeg.wasmで抽出したWAV音声データをAudioBufferとしてデコードし、AudioBufferSourceNodeに設定します。次に、選択されたEQプリセットに対応するBiquadFilterNodeチェーン（複数のフィルターの直列接続）を通過させます。その後DynamicsCompressorNodeでコンプレッサーを適用し、GainNodeで音量を調整します。

最終的な出力はOfflineAudioContextを使ってリアルタイムではなくオフライン（非インタラクティブ）で処理されます。OfflineAudioContextは通常のAudioContextより高速に処理でき、ブラウザのオーディオ出力に依存せずにバッファを生成できます。生成されたバッファはWAV形式に変換され、ffmpeg.wasmによるAACエンコードへ渡されます。

BiquadFilterNodeはデジタルフィルターの最も基本的な構成単位であるバイクアッドフィルターを実装しています。フィルタータイプには「peaking」（EQのベルフィルター）・「lowshelf」（低音シェルフ）・「highshelf」（高音シェルフ）・「lowpass」（ローパス）・「highpass」（ハイパス）などがあります。

EQプリセットは複数のBiquadFilterNodeを直列につなぐことで実現します。例えばBass Boostプリセットでは、低音域にlowshelf型フィルターを使って80Hz以下をブーストし、中低音の濁りを抑えるためにpeaking型フィルターで200〜400Hzをわずかに減衰させます。プリセットの「強さ」スライダーはこれらのフィルターのゲイン値を一括してスケーリングすることで実装されています。

Web Audio APIはPC版Chrome・Firefox・Safari・Edgeのすべてで対応しています。ただし、iOS SafariではOfflineAudioContextの動作に制限がある場合があり、VideoAudioTuneがiOS Safariを推奨対象外としているのはこの理由もあります。Android ChromeはPC Chromeと同等の対応です。

処理速度はデバイスのCPU性能に依存します。処理対象の音声が長い場合や、フィルターの段数が多い場合は処理時間が長くなります。Web Audio APIはJavaScriptのシングルスレッドとは独立したオーディオスレッドで動作するため、UIのブロッキングなしに処理できます。ただしOfflineAudioContextの処理はJavaScriptスレッドで行われる場合もあり、ブラウザ実装によって差があります。