Android: URL.createObjectURL не работает должным образом (Не удалось загрузить, потому что не найдено ни одного поддерживаемого источника.)

Question

Я пытаюсь воспроизвести аудиофайл, который был сохранен в LocalForage моего приложения Meteor Android.

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)}); 
}); 

Раньше я передал URL к экземпляру Howler.js, но, чтобы сделать его легче понять, что происходит, я добавил testAudio.

При тестировании в браузере (Chrome) код работает так, как должен. Создается URL-адрес и воспроизводится аудио.

Android (с использованием хрома, как и все Метеор приложения для Android), однако, как представляется, не нравится мой подход: При создании URL объекта, Chromium возвращает 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(); 

в основном, после создания блоб URL, вы запрашиваете его с помощью XHR снова, а затем он работает.

Это совсем не красиво, но, возможно, вы испытываете эту ошибку. Я использовал этот обходной путь успешно в open source project, но, как я уже упоминал в комментарии, если память используется, он работает только для Android 5+.