Web Audio API

概要（サマリー）

Web Audio APIとは、ブラウザ上で音声の生成、再生、加工、分析、接続を細かく制御するためのWeb APIである。音源、音量調整、エフェクト、スピーカーをケーブルでつなぐ音響機材のように、処理を組み合わせて使う。

詳細解説

AudioContextが処理の中心になる

音声処理はAudioContextから始まる。これは音声ノードの作成、時刻の管理、出力先への接続などをまとめる中心的なオブジェクトである。

ノードを接続して音を流す

Web Audio APIでは、音を作るノード、音量を変えるノード、分析するノードなどを接続する。最後にdestinationへつなぐとスピーカーなどへ出力される。

const audioContext = new AudioContext();
const oscillator = audioContext.createOscillator();
const gain = audioContext.createGain();

oscillator.connect(gain);
gain.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + 0.3);

この例では短い電子音を作り、音量ノードを通して出力している。

Web Audio APIでオシレーターやフィルターを組み合わせて音を作る実例は、次のツールで実際に触って確認できる。

音声を加工・分析できる

フィルター、左右の定位、音量、残響などを操作できる。周波数や波形を取得する分析ノードを使えば、音に合わせて動くビジュアライザーも作れる。

ユーザー操作が必要になる

多くのブラウザは突然音が鳴ることを防ぐため、自動再生を制限している。クリックやタップなどのユーザー操作を受けてから音声処理を開始または再開する設計が基本になる。

音量と停止手段へ配慮する

音は利用者や周囲へ強い影響を与える。初期音量を控えめにし、停止、ミュート、音量調整を用意することが重要である。音だけで重要情報を伝えない配慮も必要になる。

AIコーディングとの関係

AIには「ボタンを押したら440Hzの音を0.3秒鳴らす」「停止と音量調整を付ける」のように開始条件、音源、長さ、終了処理を伝えるとよい。生成コードでは、AudioContextやノードを増やし続けていないか、自動再生制限へ対応しているか、突然大きな音が出ないかを確認する必要がある。

よくある勘違い

音声ファイルを再生するだけのAPI？

違う。音の生成、加工、合成、分析まで扱える。

ページを開けば必ず音を鳴らせる？

ブラウザの自動再生ポリシーにより、ユーザー操作前は再生できない場合が多い。

ノードは接続しなくても聞こえる？

音源を最終的な出力先へつなぐ必要がある。接続経路が音声処理の流れになる。

まとめ

• Web Audio APIはブラウザの高度な音声処理機能である
• AudioContext内で複数の音声ノードを接続する
• 音の生成、加工、分析に利用できる
• 自動再生制限、音量、停止手段へ配慮する

情報ソース

• W3C: Web Audio API

より詳しくAIに聞いてみよう

• Web Audio APIを音響機材に例えて説明してください。
• AudioContextと音声ノードの役割を教えてください。
• HTMLのaudio要素との違いを整理してください。
• ボタンで短い音を鳴らすコードを書いてください。
• 音量と停止操作に配慮した実装へ改善してください。