30

我正在尝试使用 HTML5 音频创建一个简单的循环功能，并有一个非常原始的解决方案，如下所示：

$(audio).bind('timeupdate', function() {
  if (audio.currentTime >= 26){
    var blah = audio.currentTime; 
    audio.currentTime = 23;
    console.log(blah);
  }
})

这工作正常，但这里唯一的故障是 timeupdate 事件不会非常一致地触发。比如上面的console.log返回：26.14031982421875

26.229642868041992

26.13462257385254

26.21796226501465

...ETC。（你明白了..不一致的时间）

显然，这不适用于时间很重要的应用程序（音乐应用程序）。所以对我来说显而易见的解决方案是增加触发 timeupdate 事件的粒度。我还没有找到任何 API 文档......但很想知道是否有办法做到这一点。

4

2 回答 2

56

应该注意的是，您可以更频繁地阅读视频的 currentTime 属性。如果时间真的很关键，你可以忍受一点不确定性，你可以试试这个。

然而，它比使用标签自己的timeupdate事件要优雅得多。

setInterval(function () {
    console.log(audio.currentTime); // will get you a lot more updates.
}, 30);

在这种情况下，您必须自己管理间隔，确保在null设置音频元素之前清除它。但这是一种可能。

我在视频元素上使用了这种方法，但它也应该在这里应用。

于 2014-01-27T16:06:41.967 回答
29

我很抱歉，但这就是它的工作方式。从html5 规范：

每隔 15 到 250 毫秒，或者每当 MediaController 的媒体控制器位置发生变化时（以最不频繁发生的为准），用户代理必须排队一个任务以在 MediaController 上触发一个名为 timeupdate 的简单事件。

还，

因此，事件的触发速度不会超过大约 66Hz 或低于 4Hz（假设事件处理程序的运行时间不超过 250ms）。鼓励用户代理根据系统负载和每次处理事件的平均成本来改变事件的频率，这样 UI 更新不会比用户代理在解码视频时可以轻松处理的频率高。

如果您通读规范，您会认为timeupdate事件是某种“尽力而为”的事件。只要它不会对性能产生太大影响，它就会在可能的情况下并且总是会触发。

您可以过滤不时丢弃一些事件以平滑到达时间，但恐怕不能反其道而行之。

于 2012-09-07T22:00:32.647 回答