SVG＆CSS＆Audio Data API
～ ウェブの最新技術が魅せる「Firefoxの灯」（3）

音高を変えよう

　周波数を変えることで音の高さが変わります（HTMLは、jsの読み込み先を変更しただけなので割愛します）。

JS: sound_2.js

function playSound(freq) {
...
//波形データの生成
var k = 2* Math.PI * freq / SAMPLE_RATE;
for(var i = 0, n = buffer.length; i < n; i++){
    buffer[i] = Math.sin(k * i);
}
...
}

$(document).ready(function(){
$("#e").click(function() {
    playSound(329);
});
$("#g").click(function() {
    playSound(391);
});
$("#c").click(function() {
    playSound(523);
});
});

sound_2.html

　ミ・ソ・ドそれぞれを別DIVで持ち、それぞれがクリックされることで、別の周波数の音を出すようにしています。

音長を変えよう

　音の長さを変えてみます。これはバッファを大きくしたり小さくすることで実装できます（HTMLは、jsの読み込み先を変更しただけなので割愛します）。

JS: sound_3.js

function playSound(freq, second) {
...
//指定秒数分のバッファ SAMPLE_RATE x 2チャネル
var buffer = new Float32Array(SAMPLE_RATE*second);
...
}

$(document).ready(function(){
$("#e").click(function() {
    playSound(329, 0.5);
});
$("#g").click(function() {
    playSound(391, 1.0);
});
$("#c").click(function() {
    playSound(523, 1.5);
});
});

sound_3.html