JSFiddle - React, Tailwind, and code Playground

by RicardoGeek

HTML

<audio id="audio" preload="auto" tabindex="0" controls="" >
  <source src="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
</audio>

<ul id="playlist">
        <li class="active">
           <a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/01%20-%20Crusader%20Prelude.mp3">
             Saxon - Crusader Prelude
           </a>
        </li>
        <li>
            <a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/03%20-%20Little%20Bit%20Of%20What%20You%20Fancy.mp3">
                Saxon - Little Bit Of What You Fancy
            </a>
        </li>
        <li>
            <a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/04%20-%20Sailing%20To%20America.mp3">
                Saxon - Sailing To America
            </a>
        </li>
        <li>
            <a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/05%20-%20Set%20Me%20Free.mp3">
                Saxon - Set Me Free
            </a>
        </li>
        <li>
            <a href="https://s3-us-west-2.amazonaws.com/allmetalmixtapes/Saxon%20-%201984%20-%20Crusader/06%20-%20Just%20Let%20Me%20Rock.mp3">
                Saxon - Just Let Me Rock
            </a>
        </li>
    </ul>

CSS

#playlist, audio{
  background:#666;
  width:400px;
  padding:20px;
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
}
a {
  text-decoration:none;
}
.active a {
  color:#5DB0E6;
  text-decoration:none;
}
li a{
  color:#eeeedd;
  background:#333;
  padding:5px;
  display:block;
}
li a:hover{
  text-decoration:none;
}

JavaScript

init();

function init(){
    var audio = document.getElementById('audio');
    var playlist = document.getElementById('playlist');
    var tracks = playlist.getElementsByTagName('a');
    audio.volume = 0.10;
    audio.play();
    
    for(var track in tracks) {
      var link = tracks[track];
      if(typeof link === "function" || typeof link === "number") continue;
      
			link.addEventListener('click', function(e) {
      	e.preventDefault();
        var song = this.getAttribute('href');
       	run(song, audio, this);
      });
    }
    
    audio.addEventListener('ended',function(e) {
        for(var track in tracks) {
					var link = tracks[track];
          var nextTrack = parseInt(track) + 1;
        	if(typeof link === "function" || typeof link === "number") continue;
          if(!this.src) this.src = tracks[0];
          if(track == (tracks.length - 1)) nextTrack = 0;
                                	console.log(nextTrack);
        	if(link.getAttribute('href') === this.src) {
          	var nextLink = tracks[nextTrack];
          	run(nextLink.getAttribute('href'), audio, nextLink);
            break;
          }
        }
    });
}

function run(song, audio, link){
				var parent = link.parentElement;

				//quitar el active de todos los elementos de la lista
				var items = parent.parentElement.getElementsByTagName('li');
        for(var item in items) {
					if(items[item].classList)
        		items[item].classList.remove("active");
        }
        
        //agregar active a este elemento
        parent.classList.add("active");
        
        //tocar la cancion
        audio.src = song;
        audio.load();
        audio.play();
}