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

问题描述 投票：5回答：4

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

我想这对于原版海报来说已经太晚了，但万一有其他人来看...

我有一个类似的问题 - 在我的情况下代码在Chrome上工作，但据我所知，没有别的，但它不是一个Wordpress网站。经过一些实验，我意识到错误只发生在currentTime已经为0.所以解决方案非常简单：

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

我希望能有所帮助。

1
投票

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

这对我有用：

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

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

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

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

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

0
投票

我确信OP的这种方式太迟了，但我会尽力支持旧的浏览器，这可能对其他人有所帮助。在一个非常古老的Android设备（android v 4.0.4）的股票浏览器上，这并没有真正起作用，因为音频对象的currentTime在它不应该没有时返回非零，并且归零它仍然导致异常。它肯定是一个浏览器/ DOM错误，很难完全跟踪发生了什么。唯一的解决方案似乎是将该属性设置为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();

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

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

所以，我已经从另一个堆栈交换帖子中得到了这个kludgy“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块，它从未显示（意味着异常不再发生）。

因此，下一步是不断缩短睡眠时间（）以确定可靠性确实需要多长时间。我把它缩短到100mS，然后10mS完全成功（意味着歌曲指针在问题Android浏览器上确实变为0）。但是在不到2mS的时候问题又回来了。

显然，HTML5音频的早期实现存在时间问题。强制模拟睡眠（）肯定是丑陋的，但它起作用，在我的情况下，一个小的延迟无关紧要。我要在100mS时离开我的强制“睡觉（）”，这个时间应该对任何长度的音频剪辑都有好处。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.