iPad対応！HTML5 Audioで作るブラウザーピアノ (3/6)

2010年06月28日　11時00分更新

文●古籏一浩

ツイートする

鍵盤クリックで演奏する

　音データの用意ができたら次はピアノの鍵盤を表示します。ピアノの鍵盤はdiv要素を使い、表示位置や色などはスタイルシートで設定します。今回はシンプルに白黒で枠線表示だけで済ませていますが、写真などを使ってリアルな画像にしてもよいでしょう。鍵盤だけでなく一目でどの音か分かるように「ドレミファソラシド」とテキストも表示しておきます。


<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要素）には音階を示すID名を割り当てておきます。このID名は「音データのファイル名」に対応するように命名します。

●ID名とファイル名の対応

ID名	対応するファイル名
C3	C3.wav
D3	D3.wav
E3	E3.wav
F3	F3.wav
G3	G3.wav
A3	A3.wav
B3	B3.wav
C4	C4.wav
Cp3	Cp3.wav
Dp3	Dp3.wav
Fp3	Fp3.wav
Gp3	Gp3.wav
Ap3	Ap3.wav

　たとえば「ミ」であれば「E3」のID名を割り当てます。このようにファイル名と同様の規則でID名を設定すると、鍵盤がクリックされた時にID名から演奏すべきファイル名を簡単に求められます。

　次に、スクリプトでそれぞれの鍵盤に対してクリックイベントを割り当てます。クリックされたらthis.idとして鍵盤のIDを求めます。鍵盤IDとフォルダのパスと音声ファイルの拡張子を連結すると、再生すべきファイルのURLになります。


var url = "music/Piano/"+this.id+".wav";

　この音声ファイルのURLを以下のようにnew Audio()の引数へ渡した後にplay()メソッドを呼び出します。


var audioObj = new Audio(url);
audioObj.play();

　以上で、鍵盤をクリックすると対応する音が出るようになります。実際のプログラムはサンプル01です。

鍵盤をクリックするとピアノの音が鳴る

●サンプル01[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>
        <script type="text/javascript" src="js/sound.js"></script>
    </body>
</html>

●サンプル01[JavaScript：sound.js]


// クリックイベントを設定
var list = ["C3", "D3", "E3", "F3", "G3", "A3", "B3", "C4",
            "Cp3", "Dp3", "Fp3", "Gp3", "Ap3" ];
for(var i=0; i<list.length; i++){
    var ele = document.getElementById(list[i]);
    ele.addEventListener("click", function(){
        var url = "music/Piano/"+this.id+".wav";
        var audioObj = new Audio(url);
        audioObj.play();
    }, true);
}