Web Audio APIこと始め

これから熱くなってきそうなWeb Audio API。  

ネット上に上がっている情報は古いものが多いので2013/12/10時点での話を。  

- [Getting started with the Web Audio API](http://www.html5rocks.com/en/tutorials/webaudio/intro/)

- [Web Audio API W3C Editor’s Draft](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)

あたりを参考に、以下、とても簡単なサンプル。

- 環境

  - Mac OS X MountainLion

  - Fire Fox 25

```html:index.html
<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <title>SAMPLE</title>
  </head>
  <body>
    <a href="" class="btn btn-default" id="play" disabled>play</a>
    <script src="audio-sample.js"></script>
  </body>
</html>
```


 ```javascript:.audio-sample.js
window.onload = function() {
    var e = document.getElementById('play');

    var audioBufferLoader = new AudioBufferLoader('something.wav');
    audioBufferLoader.onload = function(buffer) {
        var context = this.context;
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        e.removeAttribute("disabled");
        e.onclick = function() {
            source.start();
        };
    };
    audioBufferLoader.load();
};

function AudioBufferLoader(url) {
    window.AudioContext = window.AudioContext
        || window.webkitAudioContext
        || window.mozAudioContext
        || window.msAudioContext;
    try {
        this.context = new AudioContext;
    }
    catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
    this.url = url;
    this.buffer = null;
}

AudioBufferLoader.prototype.onload = function(buffer) {
    // set your own callback!
    // this is a default behavior
    var source = this.context.createBufferSource();
    source.buffer = buffer;
    source.connect(this.context.destination);
    source.start();
};

AudioBufferLoader.prototype.loadBuffer = function(url) {
    var request = new XMLHttpRequest();
    request.open('get', url, true);
    request.responseType = 'arraybuffer';

    var loader = this;

    request.onload = function() {
        loader.context.decodeAudioData(
            request.response,
            function(buffer) {
                if (! buffer) {
                    alert('error decodeing file data: ' + url);
                    return;
                }
                loader.buffer = buffer;
                loader.onload(loader.buffer);
            },
            function(error) {
                console.error('decodeAudioData error', error);
            }
        );
    };
    request.onerror = function() {
        alert('AudioBufferLoader: XHR error');
    };

    request.send();
};

AudioBufferLoader.prototype.load = function() {
    this.loadBuffer(this.url);
};
```

注意点
-----

AudioBufferLoaderクラスを作って、そのonloadにコールバックを渡して開発してく感じにしてみた。Web Audio APIのサンプルなどでよくある`source.noteOn()`だが、これはW3Cを見ればわかるけど`souce.start()`に変わっているので注意。  

実際には同一ディレクトリになんかwavファイルなりmp3を(ここではsomething.wav)配置してやれば、とりあえずボタンを押せば音が流せるはず。  

stopだとかポーズだとかってのは今回は言及しないけど、ここらへんは結構ハマりどころなので注意が必要。

####※追記
[ストリーミング入力の場合も書いてみた](http://blog.digital-bot.com/blog/2013/12/11/web-audio/)