Question

编辑：我在Wordpress方面发布了这个，但有些管理员认为它在这里，因为他们说这是客户端问题，但我不认为这是因为他的脚本工作原样（在非wordpress网站中）但只抛出DOM异常在Wordpress站点上使用脚本时出现11错误，仅在某些浏览器上出现错误。相同的脚本在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

我遇到了同样的问题。无效状态的问题仅在IE浏览器上出现，并且仅在currentTime = 0

时出现

这对我有用：

if (!audio.currentTime) {
    audio.currentTime=0;
}

Answer 3

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

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

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

相关文章：html5 audio currentTime doesn't work

Answer 4

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

所以我必须尝试这样做的原因是，在制作音频load（）和play（）之后，音乐没有立即播放，因为歌曲指针（在浏览器提供的播放器上）显示了歌曲指向在末尾。那么，我认为将音频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();

有趣的是，尽管例外，但DID似乎将歌曲指针移到了开始位置！尤里卡？好吧不……我删除了alert（）后，问题又回来了。

因此，这让我怀疑audio 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();

这很丑陋，但确实有效，而且确实可靠！此外，如果我发出警报（err）；回到catch块中，它从不显示（这意味着不再发生异常）。

因此，下一步是继续缩短sleep（）来查看可靠性真正需要多少时间。我将其缩短为100mS，然后成功缩短为10mS（这意味着在有问题的Android浏览器上，歌曲指针确实变为0）。但是在不到2mS时，问题再次出现。

因此，在早期实施HTML5音频中显然存在计时问题。强制执行模拟sleep（）确实很丑陋，但是它可以正常工作，在我的情况下，稍有延迟就无关紧要。我将以100mS的速度离开强制的“ sleep（）”，这个时间对于任何长度的音频剪辑来说都应该很好。

当前时间= 0的HTML5音频DOM异常11错误

4 个答案: