通过 XMLHttpRequest 预加载音频文件

Posted

技术标签:

【中文标题】通过 XMLHttpRequest 预加载音频文件【英文标题】:Pre-load audio file via XMLHttpRequest 【发布时间】:2018-06-22 11:23:55 【问题描述】:

我目前正在尝试通过浏览器中的 XMLHttpRequest 预加载 MP3 文件并在音频播放器中播放。直接在播放器中设置时播放音频文件。因此,我在处理响应时一定有错误。

loadAudio : function(playerId, source) 
    var player = document.getElementById(playerId);
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() 
        console.log('readyState: ' + request.readyState + ', status: ' + request.status)
        if (this.readyState == 4 && this.status == 200) 
            console.log(request.getAllResponseHeaders());
            var blob = new Blob( [request.response] );
            var url = URL.createObjectURL( blob );
            player.src = url;
            player.addEventListener('loaded', function(e) 
                URL.revokeObjectURL(player.src);
            );
            player.play();
        // Typical action to be performed when the document is ready:
        
    ;
    request.open("GET", source, true);
    request.send();

我收到以下错误消息:

DEMUXER_ERROR_COULD_NOT_OPEN:FFmpegDemuxer:打开上下文失败(代码 4)

有人知道在哪里可以找到错误吗? 谢谢你的回答。

【问题讨论】:

【参考方案1】:

您可以尝试将 ajax 请求中的响应类型设置为 blob。

loadAudio : function(playerId, source) 
    var player = document.getElementById(playerId);
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() 
        console.log('readyState: ' + request.readyState + ', status: ' + request.status)
        if (this.readyState == 4 && this.status == 200) 
            var url = URL.createObjectURL( request.response);
            player.src = url;
            player.addEventListener('loaded', function(e) 
                URL.revokeObjectURL(player.src);
            );
            player.play();
        // Typical action to be performed when the document is ready:
        
    ;
    request.open("GET", source, true);
    request.responseType = 'blob';
    request.send();

【讨论】:

你好。谢谢您的回答。当我用 blob 构造函数填充括号时,它可以工作。添加“request.responseType = 'blob';”确实很有帮助。到目前为止,我认为像 MP3 这样的文件总是作为流发送。【参考方案2】:

试试这个:

var blob = new Blob( [ request.response],  type: "audio/mp3"  );
var url = null;

if ( window.webkitURL ) 
    url = window.webkitURL.createObjectURL(blob);
 else if ( window.URL && window.URL.createObjectURL ) 
    url = window.URL.createObjectURL(blob);

player.addEventListener('loaded', function(e) 
    URL.revokeObjectURL(url);
);
player.addEventListener('load', function(e) 
    URL.revokeObjectURL(url);
);
player.src = url;

【讨论】:

你好。谢谢您的回答。如果我没看错,您只是将 URL 替换为 webkitURL 并设置了不同的内容类型。不幸的是,这两项更改都没有帮助。

以上是关于通过 XMLHttpRequest 预加载音频文件的主要内容,如果未能解决你的问题,请参考以下文章

预加载音频文件/事件?

预加载音频文件

在移动设备上预加载音频

javascript中的完整预加载音频

如何在 HTML 5 中为音频、视频、css、图像创建预加载器?

用于预加载整个流的 Html 音频标签