Question

每当我点击按钮时，我都会播放一系列音频文件。如果我单击所述按钮，它将播放阵列中的下一个音频文件。此外，如果当用户再次点击时正在播放音频，则会重置当前曲目并播放下一首歌曲。

试图弄清楚为什么我不能循环使用我目前拥有的数组。

 var song1 = $("#sound-1");
 var song2 = $("#sound-2");
 var song3 = $("#sound-3");
 var song4 = $("#sound-4");
 var song5 = $("#sound-5");
 var song6 = $("#sound-6");
 var song7 = $("#sound-7");
 var song8 = $("#sound-8");

 var audioArray = [ song1, song2, song3, song4, song5, song6, song7, song8 ];


$(".click").click(function(){
   var i=0;
      if (i< audioArray.length){
         audioArray[i].trigger('play');
         i++;
      } else if ( i>audioArray.length){
         i = 0;
         audioArray[i].trigger('play');
      };
 });

Answer 1

更新回答：

由于您使用的是原生HTML5界面，因此还可以触发pause事件。很遗憾，没有stop事件会重置时间，但我们可以使用0属性手动将其设置为currentTime。

var i=0;
var lastPlayedFile = null;
$(".click").click(function(){
  if(lastPlayedFile !== null) {
    lastPlayedFile[0].currentTime = 0; // [0] because we need a native DOM element, not a jQuery-wrapped one
    lastPlayedFile.trigger('pause');
  }
  if (i< audioArray.length){
     lastPlayedFile = audioArray[i];
     audioArray[i].trigger('play');
     i++;
  } else if (i>=audioArray.length){ // there was a missing '=' in this condition to work properly
     i = 0;
     lastPlayedFile = audioArray[0];
     audioArray[i].trigger('play');
  };
});

Here is a fiddle I created.我在Chrome中对它进行了测试，它运行良好。
我建议looking at the audio tag reference看看你可以通过操作本机DOM音频元素来实现更多目标。

原始答案：

将i的声明移到click处理程序之外。

var i=0;
$(".click").click(function(){
  if (i< audioArray.length){
     audioArray[i].trigger('play');
     i++;
  } else if ( i>audioArray.length){
     i = 0;
     audioArray[i].trigger('play');
  };
});

每次用户点击按钮时，您都会将其值重置为0.

播放一系列音频文件

1 个答案: