Html 设置 HTML5 音频事件“timeupdate”的粒度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12325787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting the granularity of the HTML5 audio event 'timeupdate'
提问by udit
I'm trying to create a simple looping feature using HTML5 audio and have a very primitive solution as follows:
我正在尝试使用 HTML5 音频创建一个简单的循环功能,并有一个非常原始的解决方案,如下所示:
$(audio).bind('timeupdate', function() {
if (audio.currentTime >= 26){
var blah = audio.currentTime;
audio.currentTime = 23;
console.log(blah);
}
})
This works fine but the only glitch here is that the timeupdate event doesnt trigger very consistently. For instance, the console.log above returned: 26.14031982421875
这工作正常,但这里唯一的故障是 timeupdate 事件不会非常一致地触发。比如上面的console.log返回:26.14031982421875
26.229642868041992
26.229642868041992
26.13462257385254
26.13462257385254
26.21796226501465
26.21796226501465
...etc. (You get the idea..inconsistent times)
...等等。(你明白了..不一致的时间)
Obviously this won't work for an application where the timing is important (music applications). So the obvious solution to me would be to increase the granularity with which the timeupdate event is triggered. I havent been able to find any API docs...but would love to know if there is a way to do this.
显然,这不适用于时间很重要的应用程序(音乐应用程序)。所以对我来说显而易见的解决方案是增加触发 timeupdate 事件的粒度。我还没有找到任何 API 文档......但很想知道是否有办法做到这一点。
回答by amenthes
It should be noted that you canread the currentTime property of a video much more often. If time is really critical, and you can live with a little bit of uncertainty, you can try this instead.
应该注意的是,您可以更频繁地读取视频的 currentTime 属性。如果时间真的很重要,并且您可以忍受一点不确定性,那么您可以试试这个。
It is, however, a lot less elegant than using the tag's own timeupdate
event.
然而,它不如使用标签自己的timeupdate
事件优雅。
setInterval(function () {
console.log(audio.currentTime); // will get you a lot more updates.
}, 30);
In this case, you'll have to manage the interval yourself, make sure that you clear it before null
ing the audio element. But it isa possibility.
在这种情况下,您必须自己管理间隔,确保null
在音频元素之前清除它。但这是一种可能性。
I'm using this approach on a video element, but it should apply here, too.
我在视频元素上使用这种方法,但它也应该适用于这里。
回答by jbalsas
I'm sorry, but that's the way it works. From the html5 specs:
我很抱歉,但这就是它的工作方式。从html5 规范:
Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.
每 15 到 250 毫秒,或者每当 MediaController 的媒体控制器位置发生变化时,以发生频率最低的为准,用户代理必须将任务排队以在 MediaController 上触发一个名为 timeupdate 的简单事件。
Also,
还,
The event thus is not to be fired faster than about 66Hz or slower than 4Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video.
因此,事件的触发速度不会超过约 66Hz 或低于 4Hz(假设事件处理程序的运行时间不超过 250 毫秒)。鼓励用户代理根据系统负载和每次处理事件的平均成本来改变事件的频率,以便 UI 更新不会比用户代理在解码视频时可以轻松处理的频率更高。
If you read through the specification, you can get the idea that timeupdate
event is something of a "best effort" kind of event. It will fire when it can and always as long as it does not to affect performance too much.
如果您通读了规范,您就会明白timeupdate
事件是某种“尽力而为”的事件。只要它不会对性能产生太大影响,它就会在可以并且始终触发。
You could filter the events discarding some from time to time to smooth the arrival times, but I'm afraid it's not possible to do the opposite.
您可以过滤掉一些不时丢弃的事件以平滑到达时间,但恐怕无法反其道而行之。