Web Audio API 実践：ブラウザでの音声処理アーキテクチャ

Web Audio API アーキテクチャ

Web Audio API はオーディオグラフ (Audio Graph) モデルに基づいています——音声データが一連のノードを流れ、各ノードが特定の処理を実行します：

AudioBufferSource → GainNode → AnalyserNode → AudioDestination
     (音源)         (音量)      (分析/可視化)     (スピーカー)

HTML5 の <audio> 要素とは異なり、Web Audio API は低レベルで精密な音声制御を提供します。

---

コアオブジェクト

オブジェクト	役割	類比
AudioContext	音声処理のエントリーポイントとクロック	オーディオエンジン
AudioBuffer	メモリ内の音声データ	音声ファイル
AudioNode	処理ユニット	エフェクター/ミキサー
AudioParam	アニメーション可能なパラメータ	音量ノブ

AudioContext の作成

const ctx = new AudioContext();

// ブラウザポリシー：ユーザー操作後に起動が必要
button.addEventListener('click', () => ctx.resume());

---

音声トリミングの実装

ToolsKu 音声エディター の処理フロー：

async function trimAudio(file: File, startSec: number, endSec: number) {
  const arrayBuffer = await file.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

  const duration = endSec - startSec;
  const sampleRate = audioBuffer.sampleRate;
  const startSample = Math.floor(startSec * sampleRate);
  const endSample = Math.floor(endSec * sampleRate);
  const length = endSample - startSample;

  // トリミング後の buffer を作成
  const trimmed = ctx.createBuffer(
    audioBuffer.numberOfChannels, length, sampleRate
  );

  for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
    const sourceData = audioBuffer.getChannelData(ch);
    const destData = trimmed.getChannelData(ch);
    destData.set(sourceData.subarray(startSample, endSample));
  }

  return trimmed;
}

---

波形の可視化

AnalyserNode はリアルタイムの周波数/時間領域データを提供します：

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function drawWaveform() {
  analyser.getByteTimeDomainData(dataArray);
  // Canvas 上に波形を描画
  requestAnimationFrame(drawWaveform);
}

---

音声形式とエンコード

形式	ブラウザデコード	ブラウザエンコード	品質
WAV	✅	✅ (AudioContext)	可逆
MP3	✅	❌	非可逆
OGG	✅	❌	非可逆
AAC	✅ (Safari)	❌	非可逆
WebM/Opus	✅	✅ (MediaRecorder)	非可逆

ブラウザ側のエンコード能力は限られています。ToolsKu の音声ツールは主に WAV 形式を扱い、動画ツールの 音声抽出 は ffmpeg.wasm で MP3/OGG 出力をサポートしています。

---

パフォーマンス上の注意

1. AudioContext はシングルトン：1 ページに 1 つの AudioContext で十分
2. 大容量ファイルはチャンク分割してデコード：100MB を超える音声は decodeAudioData の前に分割
3. 速やかに disconnect：不要なノードは node.disconnect() でリソースを解放
4. OfflineAudioContext：リアルタイム再生が不要なオフラインレンダリングはパフォーマンスが向上

---

まとめ

Web Audio API により、ブラウザはプロフェッショナル級の音声処理能力を獲得しました。AudioContext オーディオグラフ、AudioBuffer による精密トリミング、AnalyserNode によるリアルタイム分析——これらのプリミティブを組み合わせることで、シンプルな編集から複雑な DSP まで、あらゆる音声ツールを実現できます。