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

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/33162472/setting-currenttime-attribute-programatically-on-audio-element-causes-event-list

标签

javascript

google-chrome

firefox

audio

html5-audio