Web Audio API とは
(詳しいことは全て MDN に載っていますが) Web 上 (JavaScript) でオーディオを扱うのに便利な機能が提供されています。
この API は、オーディオの入力、加工 (エフェクト)、出力を、モジュールをつなぎ合わせる形で制御できるもので、自由な構成を組み立てることができます。
先の MDN で、下の図が示されています。
©1998–2025 by individual mozilla.org contributors
CC-BY-SA-2.5
この記事では、上の図を描きながら Web Audio API を触ってみます。
Audio context を作る
まずは外枠を作ります。Audio Context と呼ばれます。
const audio_context = new AudioContext();
Audio node を作る
次に、生成したコンテキストの中に入力、エフェクト、出力のモジュール (Audio node) を生成していきます。
入力
オシレータ (発振器) のノードを作ってみます。設定は 1000Hz のサイン波、いわゆるピー音です。
const oscillator_node = audio_context.createOscillator();
oscillator_node.type = "sine";
oscillator_node.frequency.value = 1000;
// .start() を呼ばないと鳴り始めないので注意
oscillator_node.start();
エフェクト
ゲインのノードを作ってみます。音量変更ができます。0 で音無し、1で入力と同じ (増幅も減衰もなし) です。設定は 0.5 (たぶん半分？) です。
const gain_node = audio_context.createGain();
gain_node.gain.value = 0.5;
出力
出力先の node は、何もしなくとも Audio Context に備わっています。
const destination_node = audio_context.destination;
Audio node を接続する
最後に、用意した Audio node を、必要な形に接続します。
oscillator_node.connect(gain_node);
gain_node.connect(destination_node);
// 以下のように書くことも可
oscillator_node.connect(gain_node).connect(destination_node);
これで、最初の図のように仕上がりました。
完全版デモ
以上を一通り実装するとこんな感じ。
ちなみに、最近のブラウザでは、ユーザの操作無しできなり音を鳴らすことができません。Click イベントで鳴らすなどしてやる必要があります。
以上、おしまい。