在音频元素上编程设置currentTime属性会导致事件监听器无限期地触发

本文介绍了在音频元素上编程设置currentTime属性会导致事件监听器无限期地触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

正如标题所述，当以编程方式在音频元素上设置 currentTime 属性时，会出现这种情况。当这个值被设置的时候，事件监听器被无限期地反复激发。

音频会尝试播放，但由于处理过程太多，音频将跳过，我的浏览器将开始无响应。 b
$ b

我已经通过移除对 currentTime 变量的绑定来解决这个问题，但是我只是问是否有人对此有所了解为什么这是发生？最初，这只发生在Firefox上，但今天它也开始发生在Chrome上。在Safari或IE 11中不会发生。

以下是一个例子：

想法？

 < 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提到的内容：

在上面的代码块中，我将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:

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属性会导致事件监听器无限期地触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！