javascript - javascript在某个点遍历数组

Question

我正在尝试遍历播放列表，但在当前歌曲播放完毕或选择播放列表中的新歌曲之前不会跳到下一个项目。目前我的数组是迭代的，但不等待当前歌曲完成播放。

HTML：

<li mp3="song1.mp3"></li>
<li mp3="song2.mp3"></li>
<li mp3="song3.mp3"></li>
<li mp3="song4.mp3"></li>

JavaScript：

var player = new MediaElementPlayer('audio');

playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3'];

$('li').click(function() {
  for (var i = playlist.indexOf($(this).attr('mp3')); i < playlist.length; i++) {
    player.setSrc(playlist[i]);
    player.play();
    player.addEventListener('ended', function(e) {
      player.setSrc(playlist[i]);
      player.play();
    }, false);
  }
});

Answer 1

你正在运行一个普通的循环，所以一堆.play()调用一个接一个地运行。相反，只运行一个.play()，当歌曲结束时调用下一个。这可以通过递归调用来完成。此外，请使用data-mp3属性 和.data("mp3")，因为这是定义自定义属性的唯一有效方法。

$("#playlist li").click(function() {
  var start = playlist.indexOf($(this).data("mp3"));

  (function play(i) {
    if(i < playlist.length) {  // if we're not at the end of the playlist yet
      player.setSrc(playlist[i]);
      player.play();
      player.addEventListener("ended", function(e) {
        play(i + 1);  // done, so call with next index
      }, false);
    }
  })(start);  // call it with first index now
});