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 イベントで鳴らすなどしてやる必要があります。

以上、おしまい。