Música aleatoria con HTML5

19/Oct/2016 HTML5 , Deja un comentario

Algunos nos habéis pedido sobre cómo poner música aleatoria con HTML5 o música al azar, dentro de vuestras páginas web. En este artículo vamos a ver cómo podemos llevarlo a cabo.

Lo primero que tenemos que controlar es el elemento audio que es el elemento que nos brinda HTML5 para poder poner música de una forma sencilla en nuestra web.

  1. <audio controls></audio>

Otra de las cosas que debemos de saber es que para poner una pista de audio podemos hacerlo mediante el atributo src del elemento audio o bien anidando el elemento source.

  1. <audio controls>
  2. <source src="mimusica.ogg" type="audio/ogg">
  3. </audio>

Esta segunda estructura es la que vamos a utilizar para poder montar la música aleatoria con HTML5, si bien lo que haremos será construirla y modificarla directamente mediante Javascript.

Lo primero será definir un array que contenga el listado de canciones y el archivo de audio que lo representa.

  1. var lista = [
  2. ['nirvana.ogg','Nirvana - Lithium (Live at Reading 1992)'],
  3. ['blur.ogg','Blur - Country House'],
  4. ['weezer.ogg','Weezer - Buddy Holly']];

Vemos que el array es multidimensional. Es decir, cada una de las posiciones contiene a su vez un array de dos posiciones dónde la primera es el nombre de la pista de audio y el segundo es el título de la canción.

Como somos muy detallistas vamos a construir una lista para indicarle al usuario las canciones que tiene disponibles. Creamos una capa a la que llamemos "listado" en la página y regeneramos el contenido mediante el siguiente código:

  1. var listado = document.getElementById("listado");
  2. for (x=0;x<lista.length;x++) {
  3. var item = document.createElement("li");
  4. item.innerHTML = lista[x][1];
  5. listado.appendChild(item);
  6. }

Ahora vamos a cargar una de las canciones de forma aleatoria. Como tiene que ser una canción aleatoria generaremos un número aleatorio entre 0 y el tamaño de la lista ayudándonos del objeto Math

  1. umero = Math.round(Math.random()*(lista.length-1));

Ya tenemos un número aleatorio, con dicho número acudiremos a la lista y montaremos de forma dinámica un elemento source con el contenido del array.

  1. var reproductor = document.getElementById("miaudio");
  2.  
  3. var source= document.createElement('source');
  4. source.src=lista[numero][0];
  5. source.type="audio/ogg";
  6.  
  7. reproductor.appendChild(source);

Vemos que utilizamos los métodos .createElement() y .appendChild() para crear un nuevo elemento y para añadírselo al elemento de audio.

Una vez construida la pista lo que haremos será el simular una carga de la canción mediante el método .load() del audio e iniciaremos la canción con el método .play().

  1. reproductor.load();
  2. reproductor.play();

Creamos una función que haga todo esta secuencia, a esta función la llamamos .cargaCancion().

  1. function cargarCancion(numero){
  2.  
  3. // Cargamos la canción de forma dinámica
  4. var source= document.createElement('source');
  5. source.src=lista[numero][0];
  6. source.type="audio/ogg";
  7.  
  8. reproductor.appendChild(source);
  9.  
  10. reproductor.load();
  11. reproductor.play();
  12.  
  13. var texto = document.getElementById("texto");
  14. texto.innerHTML = lista[numero][1];
  15.  
  16. }

Ya estará sonando una canción de forma aleatoria. Pero ahora nos queda un pequeño detalle, que cuando acabe la canción se cargue otra canción de forma aleatoria. Para ello deberemos de controlar el fin de la canción mediante el manejo del evento "ended" como ya explicábamos en el artículo "Fin de Audio en HTML5".

  1. eproductor.addEventListener("ended", function(){
  2. cargarCancion(aleatorio());
  3. });

Cuando acaba la canción volvemos a cargar otra de forma aleatoria y así habremos conseguido tener música aleatoria con HTML5 en nuestra página web.

Vídeos sobre HTML5


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*