Javascript - オンザフライでのストリーミングオーディオ（Web Audio APIとXHR）

Question

オーディオファイルをフェッチするためのxmlhttprequestを実行しています。フェッチすると、オーディオをデコードして再生します。

 var xhr = new XMLHttpRequest(); 
     xhr.open('GET', /some url/, true); 
     xhr.responseType = 'arraybuffer'; 
     xhr.onload = function() { 
      decode(xhr.response); 
     }.bind(this); 
     xhr.send(null); 

しかし、この問題は、要求がロード/ダウンロードされた後にのみファイルがデコードされるということです。それはあなたがまだHTML5 Audioオブジェクトが必要ではなく、直接それを使用して、それで遊んであなたが一緒に使用MediaElementAudioSourceNodeを使用することができます<audio>タグ

Answer 1

の使用なし？ダウンロードを終了するのを待たずにオーディオをストリーミングするためのアプローチがありますAudio要素でWeb APIを利用できます。 here

よりもむしろXMLHttpReクエストを発行 によって直接音をロードして、バッファを復号化する通常のパスを行くから

抜粋、あなたはメディアストリームのオーディオソースノード を使用することができます（MediaElementAudioSourceNode）を に変更すると、オーディオソースノード （AudioSourceNode）とよく似た動作をするノードが作成されますが、既存のタグはラップされます。この ノードをオーディオグラフに接続すると、Web Audio APIの知識を活用して素晴らしいことを行うことができます。

サンプルコード：

window.addEventListener('load', onLoad, false); 

function onLoad() { 
var audio = new Audio(); 
source = context.createMediaElementSource(audio); 

var filter = context.createBiquadFilter(); 
filter.type = filter.LOWPASS; 
filter.frequency.value = 440; 

source.connect(this.filter); 
filter.connect(context.destination); 

audio.src = 'http://example.com/the.mp3'; 
audio.play(); 
} 

この小さな例では、タグを低域通過フィルタを適用