Audio automatically plays the next song when the previous one is finished

Question

I want to create an audio background player where the user can only click on the image to play or pause playback. I'm having trouble creating or reinstalling existing codes to create a playlist for him that automatically plays the next song when the previous one is finished. I want to do this in vanilla js.
Here is what I still have:
https://jsfiddle.net/rockarou/ad8Lkkrj/

var imageTracker = 'playImage'; swapImage = function() { var image = document.getElementById('swapImage'); if (imageTracker == 'playImage') { image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png'; imageTracker = 'stopImage'; } else { image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png'; imageTracker = 'playImage'; } }; var musicTracker = 'noMusic'; audioStatus = function() { var music = document.getElementById('natureSounds'); if (musicTracker == 'noMusic') { music.play(); musicTracker = 'playMusic'; } else { music.pause(); musicTracker = 'noMusic'; } }; 

Answer 1

here is the trick to launch the next song:

 music.addEventListener('ended',function(){ //play next song }); 

How to play another song on the same sound tag:

  music.pause(); music.src = "new url"; music.load(); music.play(); 

Now here is a cool example of a playlist in html5, you can download each song at a time if some clients (mobile) are not happy when you spend traffic, in the following example all the audio are downloaded at the same time have a smooth transition from song to song, loading songs :

 //playing flag var musicTracker = 'noMusic'; //playlist audios var audios = []; $(".song").each(function(){ var load = new Audio($(this).attr("url")); load.load(); load.addEventListener('ended',function(){ forward(); }); audios.push(load); }); //active track var activeTrack = 0; 

The underline of the witch song plays, with a bit of jquery, yes, the case yes I am lazy, lazy:

 var showPlaying = function() { var src = audios[activeTrack].src; $(".song").removeClass("playing"); $("div[url='" + src + "']").addClass("playing"); }; 

Spell here

Note. If sound does not play, manually check if the audio address is available.