3

たとえば、100MB の mp3 ファイルを AudioContext にロードしたいのですが、XMLHttpRequest を使用してそれを行うことができます。

onprogressしかし、このソリューションでは、メソッドがデータを返さないため、すべてのファイルをロードする必要があり、それから再生できます。

xhr.onprogress = function(e) {
   console.log(this.response); //return null 
};

また、メソッドでそれをやろうとしましたfetchが、この方法でも同じ問題があります。

fetch(url).then((data) => {
   console.log(data); //return some ReadableStream in body, 
                      //but i can't find way to use that
});

クライアントJavaScriptでストリームのようなオーディオファイルをロードする方法はありますか?

4

2 に答える 2

4

ストリーミングの方法で ajax 応答を処理する必要があります。fetch と ReadableStream がすべてのブラウザーで適切に実装されるまで、これを行う標準的な方法はありません。

新しい標準に従って、ajax 応答のストリーミングをどのように処理する必要があるかについて、最も正しい方法を紹介します。

// only works in Blink right now
fetch(url).then(res => {
     let reader = res.body.getReader()
     let pump = () => {
         reader.read().then(({value, done}) => {
             value // chunk of data (push chunk to audio context)
             if(!done) pump()
         })
     }
     pump()
})

Firefox はストリームの実装に取り​​組んでいますが、それまでは xhr を使用する必要があり、moz-chunked-arraybuffer IE/edge ではms-stream使用できますが、より複雑です。

于 2016-12-13T13:36:50.270 に答える