JavaScriptで音声処理する基礎｜Web Audio APIコーディング入門

Web Audio APIの処理はAudioContextオブジェクトを中心に行います。const audioCtx = new AudioContext(); でコンテキストを作成します。AudioContextはサンプリングレートを管理し、全ノードの親となるオブジェクトです。ブラウザのユーザーインタラクション（クリック等）後にaudioCtx.resume()を呼び出すことが必要な場合があります（ブラウザのAutoplay Policy）。

OfflineAudioContextは非リアルタイム処理に使います。new OfflineAudioContext(channels, length, sampleRate) で作成します。channels=2（ステレオ）・length=サンプル数（秒数×サンプリングレート）・sampleRate=48000が典型的な設定です。startRendering()メソッドでレンダリングを開始し、Promiseで処理済みAudioBufferが返ります。

EQフィルターはBiquadFilterNodeで実装します。const filter = audioCtx.createBiquadFilter(); filter.type = 'peaking'; filter.frequency.value = 100; // 中心周波数（Hz）filter.Q.value = 1.0; // Q値（帯域幅）filter.gain.value = 6; // ゲイン（dB）という形でパラメーターを設定します。

複数のフィルターを直列につなぐことで多バンドEQを実装できます。source.connect(filter1); filter1.connect(filter2); filter2.connect(compressor); compressor.connect(audioCtx.destination); という接続です。各BiquadFilterNodeのtypeには'lowpass'・'highpass'・'bandpass'・'lowshelf'・'highshelf'・'peaking'・'notch'・'allpass'が使えます。VideoAudioTuneのEQプリセットはこれらのフィルターの組み合わせで実装されています。

コンプレッサーはDynamicsCompressorNodeで実装します。const compressor = audioCtx.createDynamicsCompressor(); compressor.threshold.value = -24; // スレッショルド（dBFS）compressor.knee.value = 30; // ニー（dB）compressor.ratio.value = 12; // レシオ compressor.attack.value = 0.003; // アタック（秒）compressor.release.value = 0.25; // リリース（秒）という形で設定します。

DynamicsCompressorNodeのreductionプロパティは現在のゲインリダクション量（dB、負の値）をリアルタイムで参照できます。コンプレッサーがどの程度圧縮しているかを視覚的にモニタリングする際に使えます。

AnalyserNodeは音声信号のリアルタイム分析に使います。const analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; // FFTサイズ（波形のきめ細かさ）const bufferLength = analyser.frequencyBinCount; // fftSize/2 = 1024 const dataArray = new Uint8Array(bufferLength); // データ格納用バッファ という設定が基本です。

波形データの取得：analyser.getByteTimeDomainData(dataArray); // 時間領域データ（オシロスコープ）analyser.getByteFrequencyData(dataArray); // 周波数領域データ（スペクトラム）。取得したデータをrequestAnimationFrameのコールバック内でCanvasに描画することで、リアルタイム波形表示・スペクトラム分析が実装できます。VideoAudioTuneのライブ波形表示はこの仕組みで実装されています。

ファイルから音声データをデコードしてAudioBufferを取得するには、audioCtx.decodeAudioData(arrayBuffer)を使います。ArrayBufferはfetch APIやFileReader APIで取得したバイナリデータです。decodeAudioDataはPromiseを返し、解決値がAudioBufferになります。

OfflineAudioContextで音声を処理する例：const offlineCtx = new OfflineAudioContext(2, audioBuffer.length, audioBuffer.sampleRate); const source = offlineCtx.createBufferSource(); source.buffer = audioBuffer; source.connect(offlineCtx.destination); source.start(); const renderedBuffer = await offlineCtx.startRendering(); この結果のrenderedBufferをWAVエンコードして書き出すか、ffmpeg.wasmに渡してAACエンコードするという流れです。VideoAudioTuneのExport処理の中核となる実装パターンです。