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);

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

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

Answer 2

对不起，但这就是它的工作方式。来自html5 specs：

每隔15到250毫秒，或者每当MediaController的媒体控制器位置发生变化时（无论哪种情况发生最少），用户代理必须将任务排队，以在MediaController上触发名为timeupdate的简单事件。

此外，

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

如果您仔细阅读规范，就可以了解timeupdate事件是一种“尽力而为”的事件。只要它不会对性能产生太大影响，它就会在可能的情况下触发。

你可以不时地过滤丢弃一些事件的事件以平滑到达时间，但我担心不可能做相反的事情。

设置HTML5音频事件'timeupdate'的粒度

2 个答案: