Android：URL.createObjectURLが正常に動作しません（サポートされていないソースが見つからないため読み込めません）

Question

私のMeteor Android AppのLocalForageに保存されているオーディオファイルを再生しようとしています。

LocalForage.getItem(track_id, (err, value)=>{ 
    if(err) 
     throw err; 
    //the loaded value is an arraybuffer of an m4a file 
    let blob = new Blob([value]); 
    let url = (window.URL || window.webkitURL || window || {}).createObjectURL(blob); 
    let testAudio = new Audio(url); 
    testAudio.play().then(()=>{console.log("play successful")}).catch((err)=>{console.error(err)}); 
}); 

前に、私はHowler.jsのインスタンスへのURLを渡され、それが簡単に何が起こっているか理解できるようにすること、私はtestAudioを追加しました。

ブラウザ（Chrome）でテストする場合、コードは正常に動作します。 URLが作成され、オーディオが再生されています。

（すべての流星Androidアプリとしてクロムを使用して）アンドロイドしかし、私のアプローチを好きにいないようです： オブジェクトのURLを作成する場合、クロムは次のようにURLを返します。

blob:http%3A//localhost%3A12128/4de4516a-2989-4e99-9269-0beff4517fc4 

あなたが見ることができるように、これは、使用可能なURLではない、と私はこの

url = url.replace(/%3A/g, ':'); 

を行う場合でも、結果のコンソール出力は

DOMException: Failed to load because no supported source was found. 

です

Androidでこの機能が動作しない理由を知っている人はいますか？私は同じ問題で他の質問を見てきましたが、私のコードは私には似ていて、Chromeでテストするとうまくいくので、これにどう対処するのか本当に分かりません。ところで

は、Audiobufferがそうのように保存されます。

const request = new window.XMLHttpRequest(); 
request.addEventListener('readystatechange',() => { 
    if (request.readyState === 4) {      
     LocalForage.setItem(track.file_id, request.response, (err, value) => {    
      console.log('Successfully saved to locale forage: ' + track.name);        
     }) 
    }   
}); 

request.open('GET', track.audioLink, true); 
request.responseType = 'arraybuffer';  
request.send(); 

Answer 1

私はしばらく前に似たように走った、と（thisクロム問題で見つかった）この回避策を使用し

あなたは多分行うことができます

let url = (window.URL || window.webkitURL || window || {}).createObjectURL(blob); 
// workaround for mobile playback, where it didn't work on chrome/android. 
// fetch blob at url using xhr, and use url generated from that blob. 
// see issue: https://code.google.com/p/chromium/issues/detail?id=227476 
// thanks, gbrlg 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, true); 
xhr.responseType = 'blob'; 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4 && xhr.status == 200) { 
     var url = (window.URL || window.webkitURL || window || {}).createObjectURL(xhr.response); 

     // now url is ready 
    } 
}; 
xhr.send(); 

基本的には、blob URLを作成した後、再度XHRを使用してフェッチしてから動作します。

これはすべてではありませんが、おそらくあなたはこのバグを経験しています。 open source projectでこの回避策を使用しましたが、コメントに記載されているように、メモリが使用されている場合はAndroid 5+のみで動作しました。