Como crear un playlist de audio con javascript y HTML5

Advertisment

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.

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.

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.

JavaScript

Ahora la parte realmente importante es cómo vamos a manejar dicho playlist y para ello usamos javascript.

ahora bien, hay dos funciones clave aquí, la función init, y la función run , vamos a explicar qué hace cada una.

Advertisment

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.

Conclusion

El resultado de este su tutorial debería ser un playlist como el siguiente:

Screen Shot 2016-06-01 at 1.51.03 PM

Espero que sea de su utilidad. Manos al código!

Loading Comments…
more
Allowed HTML tags and attributes: <a href="" title=""> <blockquote> <code> <em> <strong>