Android: URL.createObjectURL does not work properl

Question

I am trying to play an audio file that has been stored in LocalForage of my Meteor Android App.

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

Before, I passed the url to an Instance of Howler.js, but to make it easier to comprehend what's happening, I added testAudio.

When testing in a browser (Chrome), the code works as it should. The url is created and the Audio is playing.

Android (using Chromium as all Meteor Android Apps) however, does not seem to like my approach: When creating the Object URL, Chromium returns an URL like this:

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

As you can see, this is not a usable URL, and even if I do this

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

The resulting console output is

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

Does anyone have an idea why this does not work on Android? I've taken a look at other questions here with the same problem, but my code looks right to me and works when tested in Chrome, so I really don't know how to approach this.

By the way, the Audiobuffer is saved like so:

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

I ran into something similar a while ago, and used this workaround (found in this chromium issue)

You could maybe do something like

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

basically, after you create the blob url, you fetch it using XHR again, and then it works.

It's not pretty at all, but perhaps you are experiencing this bug. I used this workaround successfully in an open source project, but like I mentioned in a comment, if memory serves, it only worked for Android 5+.