在音频元素上编程设置currentTime属性会导致事件监听器无限期地触发 [英] Setting currentTime attribute programatically on audio element causes event listeners to fire indefinitely
问题描述
currentTime 属性时，会出现这种情况。当这个值被设置的时候，事件监听器被无限期地反复激发。 音频会尝试播放，但由于处理过程太多，音频将跳过，我的浏览器将开始无响应。 b
$ b
我已经通过移除对 currentTime 变量的绑定来解决这个问题，但是我只是问是否有人对此有所了解为什么这是发生？最初，这只发生在Firefox上，但今天它也开始发生在Chrome上。在Safari或IE 11中不会发生。
以下是一个例子： https://jsbin.com/yorawo/edit?html,console,output
想法？
< body>
< button onclick =play（）>播放< /按钮>
< button onclick =pause（）>暂停< /按钮>
< audio id =audiosrc =https://api.soundcloud.com/tracks/172463126/download?client_id=02gUJC0hH2ct1EGOcYXQIzRFU91c72Ea&oauth_token=1-138878-53859839-4dcd0ce624b390>< /音频和GT;
< script>
var audio = document.getElementById（'audio'）;
//删除下面的行（audio.currentTime = 0），然后尝试播放音频。注意音频播放就好了。
//然后将该行添加回来，注意控制台将如何填满
audio.oncanplay = function（）{
audio.currentTime = 0;
audio.ontimeupdate = function（）{
console.log（'why'）;
function play（）{
audio.play（）;
}
函数暂停（）{
audio.pause（）;
}
< / script>
< / body>
我要复制@dandavis提到的内容：
当你在时间上跳，有一段时间才能玩，所以canplay（）
在上面的代码块中，我将currentTime设置为某个值，并且设置了 oncanplay 事件处理程序来重置该值。每当 currentTime 被设置为一个值时，就会触发 oncanplay 。因为我在 oncanplay 处理程序中重置了 currentTime ，所以这个事件不断发出。
As the title states, this behavior occurs when setting the currentTime attribute on an audio element programatically. When that value is set, the event listeners get fired over and over indefinitely.
The audio will try to play, but since there is so much processing going on, the audio will skip and my browser will start to become unresponsive.
I've solved the problem by removing the binding to the currentTime variable, but I am just asking if anyone has some insight as to why this is occurring? Initially, this was only happening on firefox, but today it started happening on chrome too. Does not happen in safari or IE 11.
Here is an example: https://jsbin.com/yorawo/edit?html,console,output
Thoughts?
<body>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<audio id="audio" src="https://api.soundcloud.com/tracks/172463126/download?client_id=02gUJC0hH2ct1EGOcYXQIzRFU91c72Ea&oauth_token=1-138878-53859839-4dcd0ce624b390"></audio>
<script>
var audio = document.getElementById('audio');
// remove the line below (audio.currentTime = 0) and then try to play the audio. notice the audio plays just fine.
// then add the line back in and notice how the console will fill up
audio.oncanplay = function () {
audio.currentTime = 0;
}
audio.ontimeupdate = function () {
console.log('why');
}
function play() {
audio.play();
}
function pause() {
audio.pause();
}
</script>
</body>
I'm going to copy what @dandavis mentioned:
when you jump in time, there a period before you can play, so canplay() fires after you can play again
in the code block above, I am setting currentTime to some value, and I have set the oncanplay event handler to reset that value. Whenever currentTime is set to a value, oncanplay is fired. Since I am resetting currentTime in the oncanplay handler, this event gets emitted endlessly.
这篇关于在音频元素上编程设置currentTime属性会导致事件监听器无限期地触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
