为什么我收到此代码的无限循环?

时间:2015-04-11 18:25:34

标签: javascript

我正在使用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

1 个答案:

答案 0 :(得分:0)

更正代码以便对他人有所帮助(请注意,我已将敏感代码从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();
        });
      }
    });

  }