有人能告诉我为什么这个JSfiddle在播放完后会重复首首歌吗？

Question

这是一个超级快速的问题。下面是一段按顺序播放一系列歌曲的代码。不知怎么的，当数组播放完后，它会重复第一首歌。知道为什么吗？我疯了，因为我搞不懂.

链接中的代码：https://jsfiddle.net/wt2joay4/

var song1 = $('#sound-1');
var song2 = $('#sound-2');
var song3 = $('#sound-3');

var audioArray = [song1, song2, song3];
var i=0;
var lastPlayedFile = null;
$(".click").click(function(){
  if(lastPlayedFile !== null) {
     lastPlayedFile[1].currentTime = 0;
     lastPlayedFile.trigger('pause'); 
  }
  if (i< audioArray.length){
     lastPlayedFile = audioArray[i];
     audioArray[i].trigger('play');
     i++;
} else if (i>=audioArray.length){
     i = 0;
     lastPlayedFile = audioArray[0];
     audioArray[i].trigger('play');
  };
});

谢谢!

Answer 1

问题在于i=0。这应该是i=1。

i变量用于指示下一步播放哪首歌曲，而不是当前索引。

所以在i<audioArray.length中，它播放audioArray[i]，然后播放i++。

但在i>=length中，它播放audioArray[0]，但让i指向0，所以下一次播放是0。

修复方法是在重新循环后离开i=1。这可以使用与上面相同的概念：i=0; ...play [i]...; i++;或只使用i=1。

} else if (i>=audioArray.length){
     lastPlayedFile = audioArray[0];
     audioArray[i].trigger('play');
     i = 1;
  };
});

建议:使用比i更好的变量名。如果它被命名为nextIndex，那么nextIndex=0就会清楚地(呃)它将下一个播放0(当它已经在播放0时)。

替代建议:将i保持为当前的指数，并在开始下一个指数之前增加，例如：

var song1 = $('#sound-1');
var song2 = $('#sound-2');
var song3 = $('#sound-3');

var audioArray = [song1, song2, song3];
var i = -1;
$(".click").click(function() {

  if (i >= 0) {
    audioArray[i].currentTime = 0;
    audioArray[i].trigger('pause');
  }

  i++;
  if (i >= audioArray.length)
    i = 0;

  audioArray[i].trigger('play');
});

(并将i更改为currentIndex，但保留为i，以便与原始文件进行比较)

更新小提琴