SAMPLE

サンプルはこちらで見ることができます. 鍵盤をクリックすると音がでます.

CODE

まず下記のコードを html 側に追加します.

<script src="script.js"></script>

これでスクリプトが読み込めるようになります. 次に音を鳴らすスクリプトを追加します. スクリプト全体のコードです.

var $id = function(id) { return document.getElementById(id); }
var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
var $classes = function(c)  { return document.getElementsByClassName(c); }

/**
 * 音データへのパス
 */
var SOUND_PATH = "../sound/";

/**
 * サポートされているファイル形式を取得
 */
var AUDIO_EXT = (function(){
    var audio = new Audio();
    var ext = "";
    if      (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; }
    else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; }
    else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; }
    
    return ext;
})();

window.onload = function()
{
    // キーボードエレメントを取得
    var keyboards = $classes("keyboard");
    // 全ての要素にクリック時のイベントを登録
    for (var i=0; i<keyboards.length; ++i) {
        // クリックイベントを登録
        keyboards[i].addEventListener("click", function(){
            // 音を鳴らす
            play(this);
        }, false);
    }
}

/*
 * 音を鳴らす
 */
function play(element)
{
    // 音を鳴らす
    var audio = new Audio(SOUND_PATH + element.getAttribute("name") + '.' + AUDIO_EXT);
    audio.play();
}

$が付いている関数について

これは私が JavaScript で DOM をいじる際によく使用するショートカットです. まぁ　document.~ っと書くのが面倒なのでこうしているだけなのでスルーしていただいてかまいません.

var $id = function(id) { return document.getElementById(id); }
var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; }
var $classes = function(c)  { return document.getElementsByClassName(c); }

音を鳴らす

ここがこのプログラムで最も重要なポイントです. やっていることは .keyboard エレメントが押された際に play() 関数に自身を 引数として渡して実行. そして, play() 関数内で 自身の name から音楽ファイル名を取得して, その音を鳴らす. っという流れになっています.

Audio の使い方についてはこちらに書いています.

これでピアノの完成♪♪ ここから先の Step はピアノを押した際の演出や機能追加になっております. 蛇足気味なのでご注意を!