1

我正在使用该<audio>标签在多个浏览器中播放音频文件。

var audioTag = document.createElement("audio"),
    sourceTag = document.createElement("source"),
    sorryTag = document.createElement("div");
sorryTag.innerHTML = "This filetype not supported";
audioTag.onerror = function() {
    //some error handling code
}
sourceTag.onerror = function() {

    /some error handling code
}
sourceTag.src = "myfile.mp3";
audioTag.appendChild(sourceTag);
audioTag.appendChild(sorryTag);
//add audioTag to DOM

这将导致

<audio>
    <source src='myfile.mp3' />
    <div>This filetype not supported</div>
</audio>

Firefox 不能播放 MP3 文件，我可以接受。Mozilla还承诺，如果or标签无法播放媒体，error则会发送一个事件。它还将逐个检查嵌套在媒体标签中的标签（或其他标签，最后一个可能是错误消息），直到找到可以使用的标签。这些似乎都不适合我；元素上永远不会触发错误事件，也不会显示错误消息。我究竟做错了什么？<audio><video><source>

4

1 回答 1

1

我发现的解决方法是：

var audioTag = document.createElement("audio"),
    sourceTag = document.createElement("source");

//Add error event listeners for browsers other than FF
audioTag.onerror = function() {
    console.log("file can't be played. error from audio tag");
}
sourceTag.onerror = function() {
    console.log("file can't be played. error from source tag");
}
//The only way to tell that file failed to play on FF
//Timeout is because audioTag.networkState === audioTag.NETWORK_NO_SOURCE
//on IE till it starts downloading the file
setTimeout(function() {
    if(audioTag.networkState === audioTag.NETWORK_NO_SOURCE) {
        console.log("this hack is only for <audio> on FF.");
        console.log("Not for <video> and on no other browsers");
    }
}, 3000);
sourceTag.src = "<file_url>";
audioTag.appendChild(sourceTag);

基本上，创建媒体和源标签，添加错误处理程序，然后将源标签附加到媒体标签，如果错误事件触发，那么您就知道该文件无法播放。

在 FF 上，错误事件不会触发，您必须依赖元素的networkState标志，将其与. 设置元素的属性后，您无法立即检查它，因为在 IE 上，直到浏览器实际开始下载文件。出于这个原因，在检查标志值之前设置一个大约 3 秒的超时时间（这不是一门精确的科学），你很有可能会给 IE 足够的时间来确定它是否能够播放文件。<audio>NETWORK_NO_SOURCEsrc<source>networkState === NETWORK_NO_SOURCE

更新

为此编写了一个测试用例：http: //jogjayr.github.com/FF-Audio-Test-Case/但错误事件在那里触发。猜我错了；或者它在 FF14（我当时正在使用）上被破坏，因为错误事件也在我的应用程序中触发 OK。谢谢@BorisZbarsky

于 2012-10-02T21:34:29.853 回答