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

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

when you jump in time, there a period before you can play, so canplay() fires after you can play again

在上面的代码块中，我将 currentTime 设置为某个值，并且我设置了 oncanplay 事件处理程序以重置该值。每当 currentTime 被设置为一个值时， oncanplay 就会被触发。由于我在 oncanplay 处理程序中重置 currentTime，因此该事件会不断发出。

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

Setting currentTime attribute programatically on audio element causes event listeners to fire indefinitely

javascript

audio

firefox

google-chrome

html5-audio