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

  • Pausar un reproductor insertado bandcamp en Javascript
  • HTML5 grabar audio en un file
  • ¿Cómo configurar el volumen del audio HTML5?
  • Interpretación de resultados de FFT de Web Audio API
  • ¿Cómo get el valor del volumen de input del micrófono con la API de audio web?
  • La búsqueda del elemento de audio HTML5 provoca un retraso (rompe la synchronization)
  • search event handling barras con javascript en tags de audio HTML5
  • ¿Cómo reproduzco el audio devuelto desde una request XMLHTTP usando la API de audio HTML5?
  • ¿Cómo se puede extraer el audio de un video en HTML5?
  • Configurar el nodo de la fuente de API de audio web desde la nube de sonido
  • ¿Cómo puedo saber si un elemento de audio HTML5 se está reproduciendo con Javascript?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.