HTML5 Audio ピアノ制作 : Complete – 自動再生させよう!!

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

Pocket

この Step で完成です! テキストエリアに入力した文字に合わせて自動再生します.

SAMPLE

サンプルはこちらで見ることができます.

下にあるリンクをクリックするとその楽譜がセットされます. カエルの歌をセットして良い感じで play ボタンを実行すると カエルの歌の追っかけができます!!

CODE

キー以外にも, ドレミ, 音階にも対応させます.

// ドレミ(sol-fa system)
var solmization_list = [
    'ド', 'レ', 'ミ', 'ファ', 'ソ', 'ラ', 'シ'
];
// 音階
var pitch_notation_list = [
    'C3', 'D3', 'E3', 'F3', 'G3', 'A4', 'B4', 'C4'
];
// キー対応
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];
    key_map[ solmization_list[i] ]      = keyboards[i];
    key_map[ pitch_notation_list[i] ]   = keyboards[i];
}

そして HTML の方にボタンを追加し, そのボタンが押された際にテキストエリアから文字列を取得し自動再生されるようにします.

var playMusic = function(music) {
    // 楽譜を大文字化
    music = music.toUpperCase();
    // 楽譜をコンマ区切りでリスト化
    music = music.split(',');
    
    var index = 0;
    // ♪数を取得
    var len = music.length;
    
    // 一定時間ごとに音を鳴らす
    setTimeout(function(){
        // 音データと間隔を分割
        var key = music[index].split(' ');
        // 間隔のデフォルト値は0.25秒
        if (key.length < 2) { key[1] = 250; }
        // 再生
        if (key_map[ key[0] ]) { play( key_map[ key[0] ] ); }
        
        // インデックスを進めてまだ残りの♪があったあった場合, 再び再生関数を登録する
        ++index;
        if (index < len) {
            setTimeout(arguments.callee, key[1]);
        }
    }, 0);
};

// play button
$class("play-button").addEventListener("click", function(){
    var music = $class("music-area").value;
    music = music.replace(/\n/g, '');
    playMusic(music);
}, false);

やっていることはちょっと複雑です. 解説はコード内のコメント文に書いています.

以上, 「HTML5 Audio と JavaScript でピアノ制作」でした~♪♪

分からない所やアドバイス, 指摘等ありましたら気軽に Twitter などでメッセージくれると嬉しいです.

TRACK BACK URL

POST COMMENT

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

COMMENT