javascript - 动态加载音频的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

Try this. Getting the native DOM element as jQuery knows nothing about .play() method on the wrapped array returned by the $('#audio') selector:

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();

});