HTML5 Audio ピアノ制作 : Step3 – キー入力で音を鳴らそう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

この Step ではキーボード入力でも音が鳴るようにします.

SAMPLE

サンプルはこちらで見ることができます. ホームポジション周りのキーを入力すると音がでます.

CODE

キー入力に反応させるためのコードです.

// キー対応
var key_list = [
    'A', 'S', 'D', 'F', 'J', 'K', 'L', ';',
    'W', 'E', 'None', 'U', 'I', 'O'
];
var key_map = {};
for (var i=0; i<key_list.length; ++i) {
    key_map[ key_list[i] ] = keyboards[i];
}

// キー入力時イベントを登録
document.onkeypress = function(e)
{
    // 入力コードを文字に変換
    var key = String.fromCharCode(e.charCode);
    // 大文字化
    key = key.toUpperCase();
    // 対応するエレメントが存在したときに, 再生する
    if ( key_map[key] ) { play( key_map[key] ); }
}

key に キーボード上の文字コード, value にそれに対応したエレメントを持ったオブジェクトを作ります. そして, キーを押した際にキーに対応した文字コードを取得してそれに対応したエレメントを引数にplay()を実行して音を鳴らします.

たったこれだけでキー対応できます!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT