【JavaScript＆HTML5講座】トップページへ

3-3 Web Audio API で音を鳴らす

コンピューター技術は日進月歩で、各社のブラウザソフトも日々進歩しています。 本項ではHTML5の新しい技術である Web Audio API を用いてブラウザで音を出す方法を解説します。 またキャラクターの動きに合わせ、 Web Audio API を使って音を出すゲームを用意しました。
※Web Audio API は2018年現在、仕様策定中の技術であり、本内容はモジラ社の開発者サイトhttps://developer.mozilla.org/ja/を参考にしています。
※今回解説した方法によるサウンド出力はEdge、Chrome、firefoxに対応しています。InternetExplorerは Web Audio API に対応していません。 スマートフォンとタブレットは Web Audio API に対応しているものと対応していないものがあります。


(1)Web Audio API の基本的な使い方

Web Audio API のオシレーターを用いて音を出す方法を解説します。
example331.html　←　動作の確認
※IEやスマートフォンには対応していません
ソースコードは次のようになります。
01<!DOCTYPE html>
02<html lang="ja">
03<head>
04<meta charset="utf-8">
05<title>WEB Audio API の使い方</title>
06</head>
07<body>
08
09<a href="../jsh5_033.html">講座に戻る</a><br><br>
10
11<input type="button" value="出力開始" onclick="initWAA()">
12<br><br>
13<input type="button" value="ド" onclick="setHZ(262)">
14<input type="button" value="レ" onclick="setHZ(294)">
15<input type="button" value="ミ" onclick="setHZ(330)">
16<input type="button" value="ファ" onclick="setHZ(349)">
17<input type="button" value="ソ" onclick="setHZ(392)">
18<input type="button" value="ラ" onclick="setHZ(440)">
19<input type="button" value="シ" onclick="setHZ(494)">
20<br><br>
21<input type="button" value="正弦波" onclick="setWV('sine')">
22<input type="button" value="矩形波" onclick="setWV('square')">
23<input type="button" value="ノコギリ波" onclick="setWV('sawtooth')">
24<input type="button" value="三角波" onclick="setWV('triangle')">
25<br><br>
26<input type="button" value="一時停止" onclick="susWAA()">
27<input type="button" value="再開" onclick="resWAA()">
28
29<script>
30
31var aCtx, ac_osci, ac_dest;
32
33function initWAA() {
34 try {
35  aCtx = new AudioContext;
36  ac_osci = aCtx.createOscillator();//OscillatorNodeを作成
37  ac_dest = aCtx.destination;//音の出力先(通常はスピーカーとなる)
38  ac_osci.connect(ac_dest);//出力先に接続
39  ac_osci.start();//音の出力を開始
40 }
41 catch(e) { alert( "Web Audio に対応していません" ); }
42}
43
44function setHZ(val) { ac_osci.frequency.value = val; }
45function setWV(val) { ac_osci.type = val; }
46
47function susWAA() { aCtx.suspend(); }
48function resWAA() { aCtx.resume(); }
49
50</script>
51</body>
52</html>

AudioContextを使う手順は次のようになります。

オーディオコンテキストを作成
　↓
オシレーターを作成
　↓
※オシレーターの周波数と波形を設定
　↓
音の出力先を設定（通常はスピーカーとなる）
　↓
スタート命令で音の出力を開始


この処理を initWWA関数で行っています。その部分のソースコードを抜粋します。 今回は※の周波数と波形の設定を省いており、省いた場合の初期値は周波数440HZ、波形はsineとなります。

aCtx = new AudioContext;
ac_osci = aCtx.createOscillator();
ac_dest = aCtx.destination;
ac_osci.connect(ac_dest);
ac_osci.start();


周波数と波形の設定は、それぞれsetHZ()、setWA()という関数を用意して行っています。

OscillatorNode.frequencyプロパティ
周波数をヘルツ(HZ)で指定します。

OscillatorNode.typeプロパティ
波形を指定します。sine(正弦波)、square(矩形波)、sawtooth(ノコギリ波)、triangle(三角波)が指定できます。

また出力した音の一時停止と再開は、次の命令で行います。
AudioContext.suspend() 音を一時停止
AudioContext.resume() 音を再開

(2)キャラクターの動作に合わせ音が鳴るゲームの完成

いわゆるワンキーアクションと呼ばれるタイプのゲームです。 スペースキーか画面タップでキャラクターがジャンプします。 時間内により多くのシャボン玉を割りましょう！
example332.html　←　動作の確認
ソースコードの確認　←　270行程度あります

Web Audio API に対応していないブラウザでも動作するように try { Web Audio関連の処理 } catch(e) {} としています。 try～catch 文は一般的にソースコードの不具合を修正するために用いますが、 エラーの発生が予測できる箇所がある場合、このようにエラー回避のために使うことができます。

インデックスと使っている変数は次の通りです。

インデックス
index画面内容
0初期化
画像の読み込み
1タイトル
スペースキーかタップでスタート
2ゲーム
キャラをジャンプさせる処理
シャボン玉の処理
時間が無くなると結果へ
3結果
Time is up と表示し、一定時間後、タイトルに戻る

使っている変数
変数名用途
idx,tmrインデックスとタイマー
gtimeゲーム時間
score,hiscoスコア、ハイスコア
scrl背景のスクロール用
ix,iy猫の座標
ypジャンプ用の変数(Y座標の変化量)
bx[], by[]シャボン玉の座標
bb[]シャボン玉の破裂演出

シャボン玉の数と色を

var BUBBLE = 7;
var BBLCOL = ["#f00", "#e80", "#dc0", "#4d0", "#0ac", "#48f", "#c4f" ];

として定義しています。例えば BUBBLE = 1 とするとシャボン玉は１個になります。7個より多くするなら BBLCOL の要素数も増やします。

使っている画像は以下の２つです。
example261_0.png
example261_1.png

今回解説したのはオシレーターを用いて音を出すという WEB Audio API の基礎です。 WEB Audio API を使えば、オーディオバッファに波形データをセットして音を流したり、エフェクトを掛けた音声を出力するプログラムを組むことができます。 またモジラ社の開発者サイトによると立体音響やドップラー効果も実現できるとのことです。 詳しい利用法をお知りになりたい方は https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API を参考になさって下さい。


前のページへ　／　次のページへ
お気軽にお問い合わせ下さい →