De hace unos años para acá, manipular elementos multimedia (audio y video) utilizando únicamente código html/css/javascript se ha vuelto una cosa de lo más facil e incluso placentera. Vamos que antes tenías que incrustar un reproductor probablemente hecho en flash y hacer magia negra para poder mandarle las canciones que querías que reprodujera, de pronto el navegador no tenía soporte para flash y todo era en vano.
No obstante con la llegada de HTML5 y los avances en mejorar javascript, la cosa se ha vuelto universal y esos problemas son cosa del pasado.
Ahora basta con jugar un poco con el código para lograr resultados asombrosos. Vamos a demostrarlo creando una playlist de canciones básica.
HTML5
Lo primero es crear un elemento audio con el primer track de la playlist cargado.
<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>
para la parte de html yo elegiré crear una lista de canciones utilizando ul. Pero es decision de ustedes como quieran darle el estilo a su propio playlist.
<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>
Bien en esta parte cabe resaltar que la referencia a la canción podemos poner la referencia al archivo con un path relativo, o bien una url completa en caso de que el archivo está alojado en otro dominio (e.j: amazon S3)
Esta parte es bastante simple y la pueden lograr como a ustedes mas les convenga, ya que es como el usuario interactuara con su list.
CSS
Ahora la parte de CSS es igual de importante que la de html, queda a discreción del usuario, este es solo un ejemplo muy básico de lo que podría ser.
#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
Ahora la parte realmente importante es cómo vamos a manejar dicho playlist y para ello usamos 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();
//Agregamos los eventos a los links que nos permitirán cambiar de canción
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);
});
}
//agregamos evento para reproducir la siguiente canción en la lista
//si la canción es la ultima reproducir la primera otra vez
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();
}
ahora bien, hay dos funciones clave aquí, la función init, y la función run , vamos a explicar qué hace cada una.
init
Inicializa la playlist poniendo el elemento actual de la misma en 0, buscando el elemento de audio que cargó con la página (use un selector de jQuery, pero puede ser javascript nativo), y luego busca la lista de canciones que también cargó con la página. luego cuenta cuantos links a canciones hay en la lista para determinar el largo de la playlist (para saber cuando parar), y luego le pone un volumen default y comienza a reproducir la primera canción. Además de eso le agrega un listener al elemento audio para el evento de cuando una canción termina, este evento revisa si estamos en la última canción, de ser asi, comienza con la primera canción otra vez de lo contrario aumenta el valor de actual y sigue con la siguiente canción en la lista.
run
Esta función es llamada por la función init en el listener de cuando una canción termina y simplemente actualiza la fuente de audio del elemento audio de html5 resalta la canción que se está reproduciendo en la lista y comienza a reproducir la canción que recibe en el parámetro link.
Conclusión
El resultado de este su tutorial debería ser un playlist como el siguiente (click en el tab “Result”):
Espero que sea de su utilidad. Manos al código!