通过音频文件阵列播放onclick

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事件会重置时间，但我们可以使用currentTime属性手动将其设置为0。

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音频元素来实现更多功能。

---

原始答案：click处理程序之外的i

移动声明。

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。