设置 HTML5 音频事件“timeupdate”的粒度

Question

我正在尝试使用 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

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

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

Answer 1

应该注意的是，您可以更频繁地阅读视频的 currentTime 属性。如果时间真的很紧迫，并且您可以忍受一点不确定性，那么您可以尝试一下。

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

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

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

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

Answer 2

很抱歉，但这就是它的工作方式。来自html5 specs：

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

还有，

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

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

您可以过滤不时丢弃一些事件以平滑到达时间，但恐怕不能做相反的事情。