動態加載音頻的src並在src不存在後停止

Question

我的歌曲叫* song_1 *，* song_2 *，* song_3 *等等。我希望它們在前一個結束後立即播放。這就是爲什麼我有一個「結束」功能，自動播放下一首歌曲（到目前爲止工作正常）。我擁有的歌曲數量是動態獲得的，所以我不能說停止通過硬編碼加載下一個src。但是當一個src不存在時，我得到一個錯誤，並且在完成後我無法重放這些歌曲。我怎樣才能防止這個錯誤？

HTML：

<audio id="audio"> 
     <source id="mp3Source" type="audio/mp3" /> 
</audio> 

JQuery的：

var audio = $("#audio"); 
var src = "audio/song_"; 
var countSongs = 0; 

audio.addEventListener("ended", function() { 
    countSongs++ 
    $('#mp3Source').attr('src', src+countSongs.toString()).detach().appendTo(audio); 
    audio.play(); 
}); 

$('#mp3Source').error(function() { 
    alert("error"); 
}); 

Answer 1

試試這個。獲取本機的DOM元素的jQuery知道.play（）方法包裝的陣列上由$（「＃音頻」）選擇返回任何內容：

var audio = $("#audio"); 
var src = "audio/song_"; 
var countSongs = 0; 

audio.addEventListener("ended", function() { 

    countSongs++ 

    $('#mp3Source').attr('src', src + countSongs.toString()).detach().appendTo(audio); 
    audio[0].play(); 

}); 

Answer 2

你似乎就有點困惑jQuery對象和DOM元素？

$('#audio')可能沒有addEventListener方法或play方法，所以我很驚訝，如果這可以工作呢？

我建議更多的東西一樣

var audio  = $("#audio"); 
var src  = "audio/song_"; 
var countSongs = 0; 

audio.on({ 
    ended: function() { 
     $('#mp3Source').prop('src', src + (++countSongs)) 
         .detach() 
         .appendTo(audio); 
     this.load(); 
     this.play(); 
    }, 
    error: function(e) { 
     alert(JSON.stringify(e)); // for no console 
     $(this).off('ended'); 
    } 
});