Web Audio APIのテスト

html5

今日はwindowsのGoogle Chrome Canary Bulidでアドレスバーにabout:flagsと入力するとWeb Audio APIを有効化できた。ただグリッチが酷くまともに接続音がでない状態にある。例えばテルミンみたいなのものがブツブツ音が途切れる状態だ。先日この機能を有効化できたのだがバージョンアップしたら機能ごと消えていた顛末。以上のことからもFireFox4に比べ遅れをとっているようですが、ローレベルなものしか提供していないAudio Data APIにくらべて、nodeっていうものでオブジェクトを入出力を管理していたり個人的になかなか期待している。一方でいろいろな機能があるため理解しがたいところもあるだろう。そこで本日はテルミンもどきを作ってみた。ちなみにOSXではjavascriptでなにかのエミュレータが作られていてそこでバリバリ音が出ているのをYoutubeで確認、良い感じ。

こちらで確認できます。 http://www.dinkypage.com/112989

<html> 
<head> 
<title>Web Audio API Thereminvox TEST</title>
<style type="text/css">
body { margin:0px; background-color:grey; }
#knob { border-radius: 4px; background-color:pink; position:absolute; z-index:1}
</style>
<script type='text/javascript'>
function $(id){return document.getElementById(id)}
var width = 30;
var height = 30;

var sampleRate = 44100;
var bufferSize = 2048;
var flag = false;
var freq = 440;
var amp = 0;
var context = new webkitAudioContext();
//デフォルトでサンプリング・レートは48000(3/14修正)
context.sampleRate = sampleRate;
// 引数は左からバッファ・サイズ、入力オブジェクト数 0,出力オブジェクト数 1
var node = context.createJavaScriptNode(bufferSize, 0, 1); 
var phase = 0;
node.onaudioprocess = function (event) {
    //ステレオの場合はもう一つ getChannelData(1)
    var data = event.outputBuffer.getChannelData(0);
    //よくみかけるサイン波のベタなやつ
    for (var i = 0; i < data.length; i++) {
	phase += freq/sampleRate;
	phase = (phase > 1) ? 0 : phase; //ミス修正(6/28)
        data[i] = Math.sin(2*Math.PI*phase) * amp;
    }
};
onmousedown = function(e){
    flag = true;
    play();
    $("knob").style.backgroundColor = "white";
}
onmousemove = function(e){
    if (flag){
	freq = e.clientX/innerWidth * 8000;
	amp = e.clientY/innerHeight;
	if(event.pageX > width/2 && event.pageX < innerWidth - width/2){
            $("knob").style.left = event.pageX - width/2;
        }
        if(event.pageY > height/2 && event.pageY < innerHeight - height/2){
            $("knob").style.top = event.pageY - height/2;
        }
    }
}
onmouseup = function(e){
    flag = false;
    stop();
    $("knob").style.backgroundColor = "pink";
}
onload = function(){
    $("knob").style.width = width;
    $("knob").style.height = height;
}
function play(){
    //出力に接続
    node.connect(context.destination);
}
function stop(){
    //接続を切る
    node.disconnect();
}
</script> 
</head> 
<body>
<div id="knob"></div>
</body> 
</html>