javascript - 为什么我收到此代码的无限循环？

Question

我正在使用mediaelement player我想动态设置当前时间(从歌曲开始的位置)。

如果我这样做，它会完美地工作:

mediaElement.setCurrentTime(22);

(所以这首歌将从 22 号开始)。

如果我想动态设置起始位置，例如:

var cur_time = new Date().getTime();
var songToStartFrom = (cur_time - song.startTime) / (1000);
mediaElement.setCurrentTime(songToStartFrom );

它进入了无限循环。 (我非常确定 SongToStartFrom 在几秒钟内就可以了)

我根本不明白为什么它适用于静态值但不适用于动态值？

更新:完整代码在这里

player = new MediaElementPlayer('#ui_audio', {
      features: ['playpause'],
      audioWidth: 30,
      audioHeight: 30,
      success: function (mediaElement, domObject) {
        // Player is ready
        mediaElement.addEventListener('canplay', function () {
          var cur_time = new Date().getTime();
          console.log("--current time: " + cur_time);
          console.log("--song time: " + song.startTime);
          console.log("--media elem time: " + (cur_time - song.startTime) / (1000));
          var songToStartFrom = (cur_time - song.startTime) / (1000);
          console.log("DURATION: " + mediaElement.duration);
          mediaElement.setCurrentTime(22);
          mediaElement.play();
        }, false);
        mediaElement.addEventListener('playing', function () {

          //pushListenerInfo();
        });
        mediaElement.addEventListener('pause', function () {
          //removeListenerInfo();
        });
        mediaElement.addEventListener('ended', function () {
          //removeListenerInfo();
        });
      }
    });

无限输出示例:

listen-moment.js:31 --current time: 1428777176774
listen-moment.js:32 --song time: 1428777166000
listen-moment.js:33 --media elem time: 10.774
listen-moment.js:35 DURATION: 29.875625
listen-moment.js:31 --current time: 1428777176779
listen-moment.js:32 --song time: 1428777166000
listen-moment.js:33 --media elem time: 10.779
listen-moment.js:35 DURATION: 29.875625
listen-moment.js:31 --current time: 1428777176784
listen-moment.js:32 --song time: 1428777166000
listen-moment.js:33 --media elem time: 10.784
listen-moment.js:35 DURATION: 29.875625
listen-moment.js:31 --current time: 1428777176788
listen-moment.js:32 --song time: 1428777166000
listen-moment.js:33 --media elem time: 10.788
listen-moment.js:35 DURATION: 29.875625
listen-moment.js:31 --current time: 1428777176795
listen-moment.js:32 --song time: 1428777166000
listen-moment.js:33 --media elem time: 10.795

有限输出示例(玩家开始玩得很好):

--current time: 1428777382847
listen-moment.js:32 --song time: 1428777376000
listen-moment.js:33 --media elem time: 6.847
listen-moment.js:35 DURATION: 29.875625

Answer 1

正确的代码对其他人有帮助(请注意，我已将敏感代码从 canplay 事件移至 playing 事件。

function startPlaying(song) {

    console.log("--will play: " + song.name);

    var tag = '<audio id="ui_audio" src="' + song.location + '" type="audio/mp3"></audio>';
    $('#ui_audio_wrapper').html(tag);

    var curTime = new Date().getTime();
    var songToStartFrom = (curTime - song.startTime) / (1000);

    player = new MediaElementPlayer('#ui_audio', {
      features: ['playpause'],
      audioWidth: 30,
      audioHeight: 30,
      success: function (mediaElement, domObject) {
        // Player is ready
        mediaElement.addEventListener('canplay', function () {
          mediaElement.play();
        }, false);
        mediaElement.addEventListener('playing', function () {
          console.log("--current time: " + curTime);
          console.log("--song time: " + song.startTime);
          console.log("--media elem time: " + (curTime - song.startTime) / (1000));
          console.log("DURATION: " + mediaElement.duration);
          console.log("--songToStartFrom: " + songToStartFrom);
          if (songToStartFrom < mediaElement.duration) {
            mediaElement.setCurrentTime(songToStartFrom);
          }
          pushListenerInfo();
        });
        mediaElement.addEventListener('pause', function () {
          console.log("--setting current time triggered");
          removeListenerInfo();
        });
        mediaElement.addEventListener('ended', function () {
          removeListenerInfo();
        });
      }
    });

  }