Question

如标题所述，以编程方式在音频元素上设置currentTime属性时会出现此问题。设置该值后，事件侦听器将无限期地反复触发。

音频将尝试播放，但由于进行了大量处理，音频将跳过，我的浏览器将开始变得无法响应。

我已经通过删除currentTime变量的绑定解决了这个问题，但我只是想问一下是否有人知道为什么会发生这种情况？最初，这只发生在firefox上，但今天它也开始在chrome上发生。在safari或IE 11中不会发生。

以下是一个示例：https://jsbin.com/yorawo/edit?html,console,output

思想？

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

Answer 1

我要复制@dandavis提到的内容：

当你跳起来时，有一段时间你可以玩，所以canplay（）会在你再玩之后开火

在上面的代码块中，我将currentTime设置为某个值，并且我已设置oncanplay事件处理程序来重置该值。只要currentTime设置为值，就会触发oncanplay。由于我正在currentTime处理程序中重置oncanplay，因此此事件会无休止地发出。

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

1 个答案: