他の楽器の音データも演奏できるようにする
次に、ピアノ以外の楽器も演奏できるように改造してみましょう。ピアノ同様に音源となる音声ファイルを用意しておきます。ファイル名はピアノの場合と同じ規則で命名し、楽器ごとに異なるフォルダに入れておきます。ここでは以下の4種類の楽器の音声ファイルを用意しました。
- ピアノ
- オルガン
- 木琴
- PSG (プログラマブルサウンドジェネレータで生成した音階)
音色ファイルをフォルダごと用意しておく
演奏する楽器の選択はフォームのラジオボタンで切り換えることにします。ラジオボタン（input要素）には楽器の音声ファイルが格納してあるフォルダと同じ名前のID名を設定しておきます。このように音源データのパスとID名を対応させておけば手軽に処理できます。併せてラジオボタンにはクラス名も指定します。ここでは以下のように設定しました。
<input type="radio" name="inst" class="inst" id="Piano" checked>ピアノ<br>
<input type="radio" name="inst" class="inst" id="Organ">オルガン<br>
<input type="radio" name="inst" class="inst" id="Xylophone">木琴<br>
<input type="radio" name="inst" class="inst" id="PSG">PSG音<br>
クラス名を指定しておけばdocument.querySelectorAll()を使って簡単にラジオボタン（エレメント）を抽出できます。あとはラジオボタンにクリックイベントを割り当てて、クリックされたら要素のID名を調べてmInstruments変数に格納します。
var sel = document.querySelectorAll(".inst");
for(var i=0; i<sel.length; i++){
sel[i].addEventListener("click", function(){
mInstruments = this.id; // ID名が、そのままフォルダ名になる
}, true);
}
実際のプログラムはサンプル03です。
ラジオボタンで楽器が選択できる
●サンプル03[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5楽器</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
</head>
<body>
<div id="kenban">
<div id="C3">ド</div>
<div id="D3">レ</div>
<div id="E3">ミ</div>
<div id="F3">ファ</div>
<div id="G3">ソ</div>
<div id="A3">ラ</div>
<div id="B3">シ</div>
<div id="C4">ド</div>
<div id="Cp3">ド#</div>
<div id="Dp3">レ#</div>
<div id="Fp3">ファ#</div>
<div id="Gp3">ソ#</div>
<div id="Ap3">ラ#</div>
</div>
<form>
<input type="radio" name="inst" class="inst" id="Piano" checked>ピアノ<br>
<input type="radio" name="inst" class="inst" id="Organ">オルガン<br>
<input type="radio" name="inst" class="inst" id="Xylophone">木琴<br>
<input type="radio" name="inst" class="inst" id="PSG">PSG音<br>
</form>
<script type="text/javascript" src="js/sound.js"></script>
</body>
</html>
●サンプル3[JavaScript：sound.js]
// クリックイベントを設定
var list = ["C3", "D3", "E3", "F3", "G3", "A3", "B3", "C4",
"Cp3", "Dp3", "Fp3", "Gp3", "Ap3" ];
var mInstruments = "Piano";
var ext = '.wav';
if((new Audio()).canPlayType('audio/ogg') == 'maybe') { ext = '.ogg'; }
for(var i=0; i<list.length; i++){
var ele = document.getElementById(list[i]);
ele.addEventListener("click", function(){
var url = "music/"+mInstruments+"/"+this.id+ext;
var audioObj = new Audio(url);
audioObj.play();
}, true);
}
// ラジオボタンにイベントを割り当てる
var sel = document.querySelectorAll(".inst");
for(var i=0; i<sel.length; i++){
sel[i].addEventListener("click", function(){
mInstruments = this.id; // ID名が、そのままフォルダ名になる
}, true);
}
