html5でリアルタイムサウンド生成(ある特殊な環境で)

html5

NO MUSIC, NO BROWSER.

最近はブラウザだけでちょろっとjavascriptを書いてテルミンのような楽器を作ることが可能である。これはfirefoxの特殊な環境の話なのだが、"20分後の未来"よりも早くすべてのブラウザで実装されると思うし!?、実装されると嬉しい。詳しくはこちらを

以前からブラウザだけでサウンドを生成することは可能だったが、テルミンのように音を止めることなく音程を高くしたり低くすることはかなわなかった。だからブラウザでテルミンを作るには古くはjava appletという方法だったし、flashもバージョン10でテルミンを作ることができた。(正確に言うとバージョン9でできたが、これは昔からよくあるハック）

ということでブラウザだけでテルミンをつくろう、あくまでもニセモノだけど。ちなみにテルミンができればTB-303だって作れるよ、もちろんあくまでもニセモノだけど。

以下を実行するにはこちらのブラウザが必要です

<html>
<head>
  <title>html5theremin</title>
</head>
<body>
<div id="h"></div>
<script type="text/javascript">
  function Snd(){
      var interval = 0;
      var sr = 44100;
      var buffer = 2048;
      var timer = 1000/(sr/buffer);
      var phase = 0;
      var audio = new Audio();
      audio.mozSetup(1, sr, 1);
      var sample = new Array(buffer);
      for (var i=0; i<buffer; i++) {
        sample[i] = 0;
      }
      function start(){
        setInterval(writeData, timer);
      }
      function writeData(){
        for (var i=0; i< buffer; i++){
          if (window.flag == 1){
            phase = (phase+(window.mouseX/sr)) % 1;
            sample[i] = (window.innerHeight/window.mouseY)*Math.sin(2*Math.PI*phase);
          }else{
            sample[i] = 0;
          }
        }
        audio.mozWriteAudio(buffer, sample);
      }
      start();
  }
  onload = function(){
    Snd();
  }
  onmousedown = function( e ){
    window.flag = 1;
  }
  onmousemove = function( event ){
    document.getElementById('h').innerHTML = event.pageX + "," + event.pageY;
    window.mouseX = event.pageX;
    window.mouseY = event.pageY;
  }
  onmouseup = function( e ){
    window.flag = 0;
  }
</script>
</body>
</html>

普段はpython（pysndobj）サウンドプログラマなのでjavascriptに慣れてないので習作ということで

if (MUSIC == true) { BROWSER = true; }