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!

Tagged in:

, , , ,