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对$（'＃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();

});

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');
    }
});

为src动态加载src并在src不存在后停止

2 个答案: