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

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

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

Answer 2

对不起,但这就是它的工作方式.从html5规范:

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

也,

因此事件的发射速度不会超过约66Hz或低于4Hz(假设事件处理程序运行时间不超过250ms).鼓励用户代理根据系统负载和每次处理事件的平均成本来改变事件的频率,以便UI更新不会比用户代理在解码视频时舒适地处理更频繁.

如果您仔细阅读规范,就可以了解timeupdate事件是一种"尽力而为"的事件.它会在可能的情况下触发,并且只要它不会对性能造成太大影响.

您可以不时地过滤丢弃某些事件的事件以平滑到达时间,但我担心不可能做相反的事情.