通過音頻文件陣列播放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。