このページの本文へ

Firefoxでソフトシンセも作れるAudio Data APIの使い方 (5/5)

2010年10月26日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

ブラウザーピアノをAudio Data APIで作り直す

 最後に、本連載で以前作った、HTML5 Audioを使ってピアノ演奏できる「ブラウザーピアノ」をAudio Data APIで実装し直してみましょう。Audio Data APIを使えばサウンドファイルが不要になるので、データの読み込みのタイムラグがなくなります。

・第37回「iPad対応!HTML5 Audioで作るブラウザーピアノ」
http://ascii.jp/elem/000/000/533/533100/

 基本的にはサンプル6のstartAudio()をそのまま利用し、鍵盤がクリックされたとき(キーボードが入力されたとき)に音を出す処理を加えます。出力する音の周波数は以下のようにハッシュ(連想配列)を使って設定しておきます。これで、freq[クリックされた要素のID名]とするだけで簡単に出力すべき周波数を求められます。


freq["C3"] = 261;
freq["D3"] = 293;
freq["E3"] = 329;
freq["F3"] = 349;
freq["G3"] = 392;
freq["A3"] = 440;
freq["B3"] = 493;
freq["C4"] = 523;
freq["Cp3"] = 277;
freq["Dp3"] = 311;
freq["Fp3"] = 370;
freq["Gp3"] = 415;
freq["Ap3"] = 466;


 実際のプログラムはサンプル7です。以前のプログラムからの変更箇所にはコメントに★印をつけてあります。サンプルは同時に音が出ないようにしてありますが、先頭行とstartAudio()内の一行を変更するだけで同時に複数の音を出せます。

【図】fig09.png

サンプル7の画面。鍵盤をクリックするか対応するキーを押すと音が出力される

サンプル7[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Audio Data APIを使った楽器</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    </head>
    <body>
        <div id="kenban">
            <div id="C3"><br>z</div>
            <div id="D3"><br>x</div>
            <div id="E3"><br>c</div>
            <div id="F3">ファ<br>v</div>
            <div id="G3"><br>b</div>
            <div id="A3"><br>n</div>
            <div id="B3"><br>m</div>
            <div id="C4"><br>,</div>
            <div id="Cp3">ド#<br>s</div>
            <div id="Dp3">レ#<br>d</div>
            <div id="Fp3">ファ#<br>g</div>
            <div id="Gp3">ソ#<br>h</div>
            <div id="Ap3">ラ#<br>j</div>
        </div>
        <script type="text/javascript" src="js/sound.js"></script>
    </body>
</html>


サンプル7[sound.js]


var audio = new Audio();    // 同時に和音を出せないようにする
var freq = [];  // ★音階に応じた周波数を入れる配列
freq["C3"] = 261;
freq["D3"] = 293;
freq["E3"] = 329;
freq["F3"] = 349;
freq["G3"] = 392;
freq["A3"] = 440;
freq["B3"] = 493;
freq["C4"] = 523;
freq["Cp3"] = 277;
freq["Dp3"] = 311;
freq["Fp3"] = 370;
freq["Gp3"] = 415;
freq["Ap3"] = 466;
// クリックイベントを設定
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(){
        startAudio(freq[this.id]);  // ★指定した周波数の音を出す
    }, true);
}
// キーボード入力に対応させる
var keydata = [
    { key : "Z", sound : "C3" },
    { key : "X", sound : "D3" },
    { key : "C", sound : "E3" },
    { key : "V", sound : "F3" },
    { key : "B", sound : "G3" },
    { key : "N", sound : "A3" },
    { key : "M", sound : "B3" },
    { key : String.fromCharCode(188), sound : "C4" },
    { key : "S", sound : "Cp3" },
    { key : "D", sound : "Dp3" },
    { key : "G", sound : "Fp3" },
    { key : "H", sound : "Gp3" },
    { key : "J", sound : "Ap3" }
]
document.addEventListener("keydown", function(e){
    var k = String.fromCharCode(e.keyCode);
    for(var i=0; i<keydata.length; i++){
        if (k == keydata[i].key){
            startAudio(freq[keydata[i].sound]);   // ★指定した周波数の音を出す
        }
    }
}, true);
// ★指定された周波数の音を出す
function startAudio(freq){
    var sampleRate = 44100;   // 44.1kHz
//  var audio = new Audio();  // 先頭行とここの先頭のコメントを削除すると多重出力可
    audio.mozSetup(1, sampleRate);  // 1ch, 44kHz
    var bufferSize = sampleRate * 1;    // 1000ms
    var data = new Float32Array(bufferSize);
    var k = 2* Math.PI * freq / sampleRate;
    for(var i=0; i<data.length; i++){
        data[i] = Math.sin(k * i);
    }
    audio.mozWriteAudio(data);
    audio.play();
}


 次回はAudio Data APIとMML (Music Macro Language) を組み合わせて、音楽を演奏してみます。お楽しみに。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く