How to automatically play next song in HTML5 player

Question

I have a html5 audio player and I cant seem to figure out how to make my script automatically play the next song on the playlist after the current song has ended. Currently the player plays a song then stops. It would also be ideal that the player auto play a song if the user hits the fast forward button as well.

Here is my JS code:

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

Answer 1

I wanted to do the same thing, but I wasn't able to for a long while. After looking up several event-listeners, I finally managed to make it work :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');
}

Put this as your playAudio function. The first eventlistener loops the song to the next song in the playlist. And the second event listener is for the song.duration which happens to be null (weird) if I don't use this eventlistener.

If you want to make the audio play right after you click the playlist element or the forward/rewind button, then add this to your click playlist function and fwd/rewind function.

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

Hope this helps!!!! (My first answer to a post :D)

Answer 2

I think the key to this is to listen for (or "bind", in jQuery parlance), the "ended" event on your audio playback tag. This will fire as soon as the media playback has finished. The example that Mystic Magic refers to leverages this, so search that page for "ended" in order to see this in action.