为音频动态加载 src 并在 src 不存在后停止答案

【问题标题】：dynamically load src for audio and stop after src does not exist为音频动态加载 src 并在 src 不存在后停止
【发布时间】：2014-03-30 21:28:05
【问题描述】：

我有名为 *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");
});

【问题讨论】：

标签： javascript jquery html error-handling html5-audio

【解决方案1】：

试试这个。获取原生 DOM 元素作为 jQuery 对 $('#audio') 选择器返回的包装数组上的 .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();

});

【讨论】：

【解决方案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');
    }
});

【讨论】：