Javascript 如何在HTML5播放器中自动播放下一首歌曲

我有一个html5音频播放器，我似乎不知道如何让我的脚本在当前歌曲结束后自动播放播放列表中的下一首歌曲。当前播放器播放一首歌曲，然后停止播放。如果用户点击快进按钮，播放器也可以自动播放歌曲

以下是我的JS代码：

jQuery(document).ready(function() {

// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');

function initAudio(elem) {
    var url = elem.attr('audiourl');
    var title = elem.text();
    var cover = elem.attr('cover');
    var artist = elem.attr('artist');

    $('.player .title').text(title);
    $('.player .artist').text(artist);
    $('.player .cover').css('background-image','url(' + cover+')');;

    song = new Audio(url);

    // timeupdate event listener
    song.addEventListener('timeupdate',function (){
        var curtime = parseInt(song.currentTime, 10);
        tracker.slider('value', curtime);
    });

    $('.playlist li').removeClass('active');
    elem.addClass('active');
    playAudio();
}
function playAudio() {
    song.play();

    tracker.slider("option", "max", song.duration);

    $('.play').addClass('hidden');
    $('.pause').addClass('visible');
}
function stopAudio() {
    song.pause();

    $('.play').removeClass('hidden');
    $('.pause').removeClass('visible');
}
// play click
$('.play').click(function (e) {
    e.preventDefault();

    playAudio();
});

// pause click
$('.pause').click(function (e) {
    e.preventDefault();

    stopAudio();
});

// forward click
$('.fwd').click(function (e) {
    e.preventDefault();

    stopAudio();

    var next = $('.playlist li.active').next();
    if (next.length == 0) {
        next = $('.playlist li:first-child');
    }
    initAudio(next);
});

// rewind click
$('.rew').click(function (e) {
    e.preventDefault();

    stopAudio();

    var prev = $('.playlist li.active').prev();
    if (prev.length == 0) {
        prev = $('.playlist li:last-child');
    }
    initAudio(prev);
});

// show playlist
$('.pl').click(function (e) {
    e.preventDefault();

    $('.playlist').fadeIn(300);
});

// playlist elements - click
$('.playlist li').click(function () {
    stopAudio();
    initAudio($(this));
});

// initialization - first element in playlist
initAudio($('.playlist li:first-child'));

// set volume
song.volume = 0.8;

// initialize the volume slider
volume.slider({
    range: 'min',
    min: 1,
    max: 100,
    value: 80,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.volume = ui.value / 100;
    },
    stop: function(event,ui) {},
});

// empty tracker slider
tracker.slider({
    range: 'min',
    min: 0, max: 10,
    start: function(event,ui) {},
    slide: function(event, ui) {
        song.currentTime = ui.value;
    },
    stop: function(event,ui) {}
});
});

---

我认为关键是监听音频播放标签上的“结束”事件（用jQuery的说法是“绑定”）。这将在媒体播放完成后立即触发。Mystic Magic提到的例子就是利用了这一点，所以在该页面中搜索“End”以查看其实际效果。

我也想做同样的事情，但很长一段时间我都没能做到。在查找了几个事件侦听器之后，我终于成功地使其工作：D

function playAudio() {
  song.addEventListener('ended', function () {
    var next = $('.playlist li.active').next();
    if (next.length == 0) {
      next = $('.playlist li:first-child');
    }
    initAudio(next);

    song.addEventListener('loadedmetadata', function () {
      playAudio();
    });
  }, false);

  tracker.slider("option", "max", song.duration);
  song.play();
  $('.play').addClass('hidden');
  $('.pause').addClass('visible');
}

将此作为您的playAudio功能。第一个eventlistener将歌曲循环到播放列表中的下一首歌曲。第二个事件监听器用于song.duration，如果我不使用这个eventlistener，它恰好为null（奇怪）

如果要在单击播放列表元素或前进/后退按钮后立即播放音频，请将其添加到单击播放列表功能和前进/后退功能中

song.addEventListener('loadedmetadata', function() {playAudio(); });

---

希望这有帮助！！！！（我对一篇帖子的第一个回答是：D）

引用的代码不多，所以我很难删除这个网站。谢谢，就像我说的，我不是一个很好的程序员，你的反馈很感谢，但我很难拒绝。你有可能错过发布“initAudio”代码吗？我找不到该方法的有效引用。