Web Audio APIで音源ファイルを使わずにブラウザから音を出す

画面に対応するJavaScript … 2（index.js）

2.のJavaScriptでは、画面のボタンが押された時の処理を記述しています。

ユーザーが「開始」ボタンを押すと、2.のJavaScriptのstartメソッドが呼ばれます。

startメソッドでは、Web Audio APIを使って音を出すオブジェクト（このサンプルではWEBAUDIOという名前）が生成済みか（webAudio変数に値が代入されているか）を調べ、未生成の場合は、WEBAUDIOオブジェクトを生成（new）し、webAudioというグローバル変数に代入（保存）してinitメソッドを呼び出します。

初期化を行うinitメソッドは非同期処理なので、引数でコールバック関数を渡して、処理が終わったらその関数を呼んでもらうようにしています。

コールバック関数として指定されているstartProcメソッドでは、1.のHTMLから「周波数」欄の値を読み取って、setFrequencyメソッドを呼び出して、4.のJavaScriptにメッセージとして周波数の値を送ります。

initメソッドの実行が、window.onload（ページが読み込まれた時に実行されるコード）ではなく、startメソッド（「開始」ボタンを押した時に実行されるコード）の中で行われているのは、Web Audio APIの仕様で、「音を出す処理はユーザーのアクション（画面のクリックなど）を起点に実行しなければならない」と規定されているためです。

"use strict";

var webAudio;

window.onload = function () {
	document.getElementById('startbutton').addEventListener('click', start);
	document.getElementById('stopbutton').addEventListener('click', stop);
}

function start(event) {
	if (!webAudio) {
		webAudio = new WEBAUDIO();
		webAudio.init(startProc);
	} else {
		startProc();
	}
}

function startProc() {
	if (!webAudio) return;
	var freq = document.getElementById('freq').value;
	webAudio.setFrequency(freq);
	webAudio.getAudioContext().resume();
}

function stop() {
	if (!webAudio) return;
	webAudio.getAudioContext().suspend();
}