如何检测/处理浏览器无法播放媒体文件

Question

我使用JavaScript library播放mp3文件。由于我无法控制的情况，我会定期链接到无法播放的文件。发生这种情况时，我在Firebug中看到一条消息，说明该文件无法解码。

  

媒体资源https://example.com/bad_file.mp3无法解码。

Click here to see the behavior in action on jsfiddle

由于我无法替换文件，我正在寻找一种方法来确定是否可以播放文件。该框架为脚本本身无法加载时提供了onerror()方法，但没有提供何时无法播放文件。

虽然特定于SoundManager2的答案是可以接受的，但我更喜欢独立于任何特定库或框架的解决方案。

Answer 1

如果您使用标准<audio src="whatever.mp3">表示法，则可以使用此脚本挂钩发生的任何音频错误：

function handleSourceError(e) { alert('Error loading: '+e.target.src) }
function handleMediaError(e) {
  switch (e.target.error.code) {
    case e.target.error.MEDIA_ERR_ABORTED:
      alert('You aborted the media playback.'); break;
    case e.target.error.MEDIA_ERR_NETWORK:
      alert('A network error caused the media download to fail.'); break;
    case e.target.error.MEDIA_ERR_DECODE:
      alert('The media playback was aborted due to a corruption problem or because the media used features your browser did not support.'); break;
    case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
      alert('The media could not be loaded, either because the server or network failed or because the format is not supported.'); break;
    default:
      alert('An unknown media error occurred.');
  }
}

var toArray = Array.prototype.slice;
toArray.apply(document.getElementsByTagName('audio')).forEach(function(audio){
  audio.addEventListener('error', handleMediaError);
  toArray.apply(audio.getElementsByTagName('source')).forEach(function(source){
    source.addEventListener('error', handleSourceError);
  });
});

如果您可以获得对Audio实例的引用，那么您可以添加错误处理程序：

audioInstance.addEventListener('error', handleMediaError)

Answer 2

通常，您可以向加载资源的元素添加onerror事件侦听器。因此，例如，因为你正在做音频，你会将一个事件监听器附加到音频元素

//assume this html:
//<audio id="myaudio" src="http://badurl.com/mp3.mp3"></audio>
document.getElementById("myaudio").addEventListener("error",function(event){
  //do error handling here
});

对于SoundManager2，你可以传递一个onload回调选项，它将传递一个success变量，如果没有，则为true，API reference

var mySound = soundManager.createSound({
  id: 'aSound',
  url: 'http://badurl.com/mp3.mp3',
  onload:function(success){
     if(!success){
        //error happened
     }
  } 
});
mySound.play();