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

Posted 2023-02-25

【中文标题】有人能告诉我为啥这个 JSfiddle 在播放完后会重复第一首歌吗？

【英文标题】：Can someone tell me why this JSfiddle repeats the first song when finishes playing?有人能告诉我为什么这个 JSfiddle 在播放完后会重复第一首歌吗？

【发布时间】：2021-08-19 10:24:15

【问题描述】：

这是一个超级快速的问题。这是一段按顺序播放歌曲数组的代码。不知何故，当数组完成播放时，它会重复第一首歌曲。知道为什么吗？我要疯了，因为我想不通......

链接中的代码如下：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');
  ;
);

谢谢！

【问题讨论】：

Last if: i=0 TBH 似乎有点落后，因为 i = next 索引播放而不是更明智的 current 播放索引。

@freedomn-m 删除它不会让我继续播放数组，不幸的是：S

再看一遍：它是 0,1,2,0,0,1,2 - 所以第一个在循环播放时会播放两次 - 是这个问题吗？

@freedomn-m 正确，不幸的是：（

【参考方案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 以与原始版本进行比较）

updated fiddle