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 });，因为这是定义自定义属性的唯一有效方式。

{{1}}

javascript在某个点迭代数组

1 个答案: