javascript - 如何在播放列表代码中添加自动下一首歌曲

Question

我正在玩在互联网上找到的代码，到目前为止一切都很好，我只想添加一个东西，但我不知道确切的方法。它是一个音频播放器，这里是播放列表的 HTML 端。

<ul id="playlist" class="">
    <li song="1.mp3" cover="1.jpeg" artist="artist 1">song 1</li> 
    <li song="2.mp3" cover="2.jpeg" artist="artist 2">song 2</li>
    <li song="3.mp3" cover="3.png" artist="artist 3">song 3</li>
    <li song="4.mp3" cover="4.png" artist="artist 4">song 4</li>
</ul>

这是统治这一切的整个代码

var audio;

//Hide Pause Button
$('#pause').hide();


//Initialize Audio
initAudio($('#playlist li:first-child'));


//initialiser function
function initAudio(element) {
    var song = element.attr('song');
    var title = element.text();
    var cover = element.attr('cover');
    var artist = element.attr('artist');

    //create an audio object
    audio = new Audio('media/' + song);

    if(!audio.currentTime) {
        $('#duration').html('0.00');
        //display 0 time 
    }

    $('#audio-player .title').text(title);
    $('#audio-player .artist').text(artist);

    //insert a cover image
    $('img.cover').attr('src','img/covers/' + cover);

    $('#playlist li').removeClass('active');
    element.addClass('active');
}

//Play button
$('#play').click(function() {
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(100);
    showDuration();
});

//Pause button
$('#pause').click(function() {
    audio.pause();
    $('#pause').hide();
    $('#play').show();
   });

   //Stop button
$('#stop').click(function() {
    audio.pause();
    audio.currentTime = 0;
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeOut(400);
   });

   
//Next Button
$('#next').click(function(){
    audio.pause();
    var next = $('#playlist li.active').next();
    if (next.length == 0) {
        next = $('#playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
});

//Prev Button
$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist li.active').prev();
    if (prev.length == 0) {
        prev = $('#playlist li:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
});

//Playlist Song Click
$('#playlist li').click(function () {
    audio.pause();
    initAudio($(this));
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    audio.play();
    showDuration();
});

//Volume Control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 30);
});

   //time duration
function showDuration() {
    $(audio).on('timeupdate', function() {
        //get hours and minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime) / 60) % 60;

        //add 0 if less than 10
        if(s < 10) {
            s = '0' + s;
        }
        $('#duration').html(m + '.' + s);
        var value = 0;
        if(audio.currentTime > 0) {
            value = Math.floor((100 / audio.duration ) * audio.currentTime);
        }
        $('#progress').css('width', value + '%');
    });
}

正如我所说的一切正常，我错过了自动化。

有人请尝试帮助我吗？

TIA

---

编辑：好像我解决了以这种方式添加功能

    audio.onended = function(e) {
        audio.pause();
        var next = $('#playlist li.active').next();
        if (next.length == 0) {
            next = $('#playlist li:first-child');
        }
        initAudio(next);
        audio.play();
    } 

就在下面audio = new Audio('media/' + song);

它在代码方面看起来不错吗？

标签： javascripthtmljquerymedia-playerweb-audio-api