4

我正在尝试播放存储在我的 Meteor Android 应用程序的 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)});
});

之前，我将 url 传递给 Howler.js 的实例，但为了更容易理解发生了什么，我添加了 testAudio。

在浏览器 (Chrome) 中进行测试时，代码可以正常工作。网址已创建，音频正在播放。

然而，Android（使用 Chromium 作为所有 Meteor 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();
4

1 回答 1

3

我不久前遇到了类似的事情，并使用了这个解决方法（在这个铬问题中找到）

你也许可以做类似的事情

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 获取它，然后它就可以工作了。

它一点也不漂亮，但也许你遇到了这个错误。我在一个开源项目中成功地使用了这个解决方法，但就像我在评论中提到的那样，如果没有记错的话，它只适用于 Android 5+。

于 2016-11-29T16:26:12.573 回答