reproducción automática de audio la próxima canción cuando el anterior está terminado

Quiero crear un reproductor de background de audio donde el usuario solo puede hacer clic en la image para reproducir o detener la reproducción. Tengo problemas para crear o volver a grabar los códigos existentes para crear una list de reproducción, que reproduce automáticamente la canción siguiente cuando finaliza. Quiero hacerlo en vanilla js.
Esto es lo que tengo hasta ahora:
https://jsfiddle.net/rockarou/ad8Lkkrj/

var imageTracker = 'playImage'; swapImage = function() { var image = document.getElementById('swapImage'); if (imageTracker == 'playImage') { image.src = 'http://img.javascriptes.com/javascript/button_pause_01.png'; imageTracker = 'stopImage'; } else { image.src = 'http://img.javascriptes.com/javascript/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'; } }; 

One Solution collect form web for “reproducción automática de audio la próxima canción cuando el anterior está terminado”

aquí está el truco para activar la siguiente canción:

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

Cómo reproducir otra canción en la misma label de audio:

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

Ahora aquí hay un buen ejemplo de una list de reproducción en html5, puedes cargar cada canción en el momento, caso algunos clientes (mobile) no estarán contentos cuando consums el tráfico, en el siguiente ejemplo todos los audios se cargan al mismo time para tener una transición suave de canción en canción, cargando las canciones:

 //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; 

Destacando que la canción de bruja está sonando, con un poco de jquery, sí, caso, sí, soy flojo, vago:

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

Violín aquí

Nota: Si el sonido no se reproduce, verifique manualmente si las URL de audio están accesibles

  • testing funcional para restricciones de audio html5 en iOS?
  • La mejor forma de reproducir / pausar / search files de audio grandes con precisión en Web Audio API
  • La mejor forma de reproducir sonido con HTML5 y Javascript
  • Múltiples pistas de audio para video HTML5
  • Grabación de audio de alta calidad en el browser web
  • Reproducción automática de audio / video HTML5 en iOS5
  • ¿Cómo replace el enlace del file con un nombre durante la reproducción de audio de Safari / Chrome en la pantalla de inicio?
  • Disparar una pista de audio HTML5 para reproducir cada vez que se haya cargado
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.