MP3 Player Html5 and javascript

Question

Next guys I have a script that works well, but with some limitations, the play buttons, pause, next and the slider of the position of the song work normally, but not automatically, when you finish playing a song it does not skip to next, how to solve this? and the music also does not start automatically

Here the DEMO where I downloaded the script:

https://www.script-tutorials.com/demos/363/

Below the script

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(data/' + cover+')');;

    song = new Audio('data/' + 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');
}
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

The parties responsible for a música iniciar automaticamente e ao acabar de tocar uma música pular para próxima are commented in the code.

Other parts have been added to the code so that the player works correctly and can be observed just below the comment // adicionado

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(data/' + 
    cover+')');;

    song = new Audio('data/' + url);
    // inicio código reproduzir próximas musicas automaticamente
    song.addEventListener("ended", function(){
      stopAudio();

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

      playAudio();

      song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
    });
    // fim código reproduzir próximas musicas automaticamente

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

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

    $('.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');
    }
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');

    initAudio(next);
    song.play(next);

    //Adicionei isso (Miguel)
    song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });

});

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

    stopAudio();

    var prev = $('.playlist li.active').prev();
    if (prev.length == 0) {
        prev = $('.playlist li:last-child');
    }
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');

    initAudio(prev);
    song.play(prev);

    //Adicionei isso (Miguel)
    song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
});

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

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

});

// playlist elements - click
$('.playlist li').click(function () {

    stopAudio();
    initAudio($(this));
    song.play();
    // adicionado
    $('.play').addClass('hidden');
    $('.pause').addClass('visible');
});

// 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) {}
});
// inicia o player automaticamente
playAudio();

//Adicionei isso(Miguel)
song.addEventListener("loadedmetadata", function() {
        tracker.slider("option", "max", song.duration);
      });
});