WebAudioAPIでmp3をすべてダウンロードするのを待たずに再生を開始したい


# 質問

サイズの大きいmp3をXHRでロードし、WebAudioAPIを用いて再生しているのですが、ロードが完了するまでの待ち時間が発生します。  
サイズが大きいmp3であっても待ち時間を少なく抑えて再生を開始する方法はありますでしょうか。

たとえば、SoundCloudは再生ボタンをクリックすると即座に再生が開始されます。デベロッパーツールで確認すると再生しながらロードを行っているのがわかります。  
どのような実装でこれを実現しているのか分かっていないのですが、何かしらの方法があるのではないかと考えています。

# 待ち時間が発生してしまう実装

[code]

    (function () {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      var context = new AudioContext();
    
      loadSound('./audio/sample.mp3');
    
      function loadSound(url) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.setRequestHeader('Range', 'bytes=0-');
        request.responseType = 'arraybuffer';
    
        request.onload = function() {
          context.decodeAudioData(request.response, function(buffer) {
            playSound(buffer);
          }, function () {
            console.debug('error');
          });
        };
    
        request.send();
      }
    
      function playSound(buffer) {
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0);
      }
    })();
[/code]




Media Source Extensionsという、JavaScriptでストリーミングするための標準APIがあります。  
これを使ってみるのはいかがでしょうか?

参考  
<https://github.com/72lions/PlayingChunkedMP3MediaSourceAPI>

[Media Source Extensions](http://www.w3.org/TR/media-source/) W3Cでの仕様

### 追記:

デベロッパーツールで音声ファイルのレスポンスのhttp statusを確認したところ、一般的な`200 OK`ではなく、`206 Partial
Content`を返していました。

`206 Partial Content`はサーバーにデータ(今回の場合はmp3)の一部分を要求するものらしいです。  
これを使っているのではないでしょうか?

参考  
RFC: <https://www.rfc-editor.org/rfc/rfc7233>  
<http://blog.cloudpack.jp/2014/08/12/mamma-mia-http-status-code-206-partial-
content/>




Media Source Extensionsという、JavaScriptでストリーミングするための標準APIがあります。  
これを使ってみるのはいかがでしょうか?

参考  
<https://github.com/72lions/PlayingChunkedMP3MediaSourceAPI>

[Media Source Extensions](http://www.w3.org/TR/media-source/) W3Cでの仕様

### 追記:

デベロッパーツールで音声ファイルのレスポンスのhttp statusを確認したところ、一般的な`200 OK`ではなく、`206 Partial
Content`を返していました。

`206 Partial Content`はサーバーにデータ(今回の場合はmp3)の一部分を要求するものらしいです。  
これを使っているのではないでしょうか?

参考  
RFC: <https://www.rfc-editor.org/rfc/rfc7233>  
<http://blog.cloudpack.jp/2014/08/12/mamma-mia-http-status-code-206-partial-
content/>

