HTML5 音频 DOM 异常 11 错误，currentTime=0

Question

编辑： 我在 Wordpress 端发布了这个，但一些管理员认为它放在这里，因为他们说这是客户端问题，但我不认为这是因为他的脚本按原样工作（在非 wordpress 站点中）但只抛出 DOM 异常11 错误，当脚本用于 Wordpress 站点并且仅在某些浏览器上时。完全相同的脚本在 Wordpress 下工作，但仅在 Chrome 上工作。

---

我采用了一个脚本，当锚链接悬停时播放音频剪辑并将其转换为 Wordpress 插件。

它可以正常工作，但只能在 Chrome (Mac) 上运行。在 Firefox 或 Safari（当前版本）上，脚本会引发 DOM 错误。

这是错误：

INVALID_STATE_ERR：DOM 异常 11：尝试使用不可用或不再可用的对象。

产生错误的行是：html5audio.currentTime=0

以下脚本在我在非 Wordpress 网站中遇到问题的浏览器上运行良好。 http://www.javascriptkit.com/script/script2/soundlink.shtml#current

我已尝试研究该问题并使用了一些修复方法，但我无法开始工作。

var html5_audiotypes={ 
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}

function audio(sound){
    var html5audio=document.createElement('audio')
    if (html5audio.canPlayType){ //check support for HTML5 audio
        for (var i=0; i<arguments.length; i++){
            var sourceel=document.createElement('source')
            sourceel.setAttribute('src', arguments[i])
            if (arguments[i].match(/\.(\w+)$/i))
                sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
            html5audio.appendChild(sourceel)
        }
        html5audio.load()
        html5audio.playclip=function(){
            html5audio.pause()
            html5audio.currentTime=0
            html5audio.play()
        }
        return html5audio
    }
}

Answer 1

我想原始海报已经太晚了，但万一其他人来看......

我遇到了类似的问题 - 在我的情况下，代码在 Chrome 上运行，但据我所知没有别的，但它不是 Wordpress 网站。经过一些实验，我意识到只有当 currentTime 已经为 0 时才会出现错误。所以解决方案很简单：

html5audio.pause(); 
if (html5audio.currentTime != 0) {
   html5audio.currentTime=0;
}  
html5audio.play();

我希望对某人有所帮助。

Answer 2

我已经在 Win7/Chrome、IE、FF 上进行了测试——最新版本。他们都工作。这可能是浏览器兼容性问题。不幸的是，HTML5 Audio API 还不是很成熟。试试这个：

audio.pause();
audio.src = audio.src;

如果没有帮助，可能，如果 HTML5 问题跟踪器还没有错误报告，请向他们发送错误报告。

相关帖子：html5 audio currentTime doesn't work

Answer 3

我确信这种方式对于 OP 来说为时已晚，但我会尽力支持旧浏览器，这可能对其他人有所帮助。在一个非常旧的 Android 设备（android v 4.0.4）的股票浏览器上，这并没有真正起作用，因为音频对象的 currentTime 在它不应该返回时返回非零，并且归零它仍然导致异常。它肯定是一个浏览器/DOM 错误，并且很难准确追踪正在发生的事情。唯一的解决方案似乎是将属性设置放入 try/catch 块中。

所以我不得不尝试这个的原因是因为在制作音频加载（）和播放（）之后，音乐没有播放，因为歌曲指针（在浏览器提供的播放器上）显示歌曲点是在末尾。那么，我想，将音频 currentTime 设置为 0 有什么害处？好吧，它有点工作，但后来我意识到代码块中除了那个点之外什么都没有工作，因为这个异常被抛出了！

因此，按照本文中的建议，我只将 currentTime 属性设置为 0（如果它不为零）。但在我的情况下，即使第一次加载，currentTime 也指向歌曲的结尾，所以它当然不是零。但是设置它仍然会导致抛出异常。

所以我接下来尝试将 currentTime 设置放入 try/catch 块中。

...
 // assume a is the audio element, and the audio source has already been supplied...

    a.load();
    try {if (!a.currentTime) a.currentTime=0;}  
    catch(err) {alert(err);}    
    a.play(); 

有趣的是，尽管有例外，但它似乎确实将歌曲指针移动到了起始位置！尤里卡？好吧，不......一旦我删除了警报（），问题又回来了。

所以这让我怀疑音频 load() 方法不是“阻塞”方法，并且在音频真正准备好更改其歌曲指针之前返回。这仍然不能解释为什么加载的歌曲不会从零开始，但我所做的是在 load() 和随后将 CurrenTime 设置为 0 和播放之间添加了一个强制延迟。

所以，我已经从另一个堆栈交换帖子中获得了这个笨拙的“sleep()”模拟...(JavaScript sleep/wait before continuing)

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

当然那不是javascript计时器！它实际上会停止执行，直到它返回。所以使用它，我改变了我的代码来播放这样的歌曲......再次，记住'a'是实际元素......

a.load();
sleep(1000);
try {if (a.currentTime != 0) a.currentTime=0;}  // DOM bug
catch(err) {;}  // old android sometimes starts at end :-(
a.play(); 

这是丑陋和可怕的，但它确实有效，而且它确实可靠地工作！此外，如果我发出警报（错误）；回到 catch 块，它从未显示（意味着不再发生异常）。

所以下一步是不断缩短 sleep() 以查看可靠性真正需要多少时间。我将它缩短到 100 毫秒，然后 10 毫秒完全成功（这意味着歌曲指针在问题 Android 浏览器上确实变为 0）。但不到 2 毫秒，问题又回来了。

所以很明显，在这个 HTML5 音频的早期实现中存在时间问题。强制模拟 sleep() 肯定很难看，但它可以工作，而且在我的情况下，一点延迟并不重要。我将强制“sleep()”设置为 100 毫秒，希望这个时间对任何长度的音频剪辑都有好处。