Audio auto play

by paska

HTML

<audio id="audioElem"></audio>
<input type="button" value="Start" id="btn" />
<textarea id="txtLog"></textarea>

CSS

textarea {
  width: 100%;
  height: 1000px;
}

JavaScript

$(function() {
	var songs = [
  	"https://zumbidos.org/wp-content/uploads/audios/ceatles.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/ceatles.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/and-i-love-her.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/andres-calamaro.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/charly-garcia.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/fina-estampa.mp3",
  	"https://zumbidos.org/wp-content/uploads/audios/jimi-hendrix.mp3"],
		$audioElem = $("#audioElem"),
    ixSong = 0,
    $txtLog = $("#txtLog");

  function reproducir() {
    $audioElem.on('canplay canplaythrough', function() {    
      $txtLog.val($txtLog.val() + "\n Listo para reproducir canción " + ixSong + ". Hora: " + new Date().toString());
	  });
  	$txtLog.val($txtLog.val() + "\n Cargando la canción " + ixSong + ". Hora: " + new Date().toString());
    $audioElem.attr("src", songs[ixSong]);
    $audioElem[0].play();
    $txtLog.val($txtLog.val() + "\n Canción cargada " + ixSong + ". Hora: " + new Date().toString());
    $audioElem.on("ended", function() {
    	$txtLog.val($txtLog.val() + "\n Terminó la canción " + ixSong + ". Hora: " + new Date().toString());
      ixSong++;
      if (ixSong >= songs.length) {
      	alert("Fin!");
      	return;
      }
      var $newAudioElem = $("<audio></audio>");
      $audioElem.after($newAudioElem);
      $audioElem.remove();
      $audioElem = $newAudioElem;
      reproducir();
    });
  }
  $txtLog.val("Versión #5");
	$("#btn").on("click", function() {
    reproducir();
  });

});