Música aleatoria con HTML5

19/Oct/2016 HTML5 , 4 Comentarios
Ejemplos de Artículos sobre HTML5

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 nos brinda HTML5 para poder poner música de una forma sencilla en nuestra web.

<audio controls="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.

<audio controls="controls"> 
  <source src="mimusica.ogg" type="audio/ogg" />
</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.

var lista = [
  ['nirvana.ogg','Nirvana - Lithium (Live at Reading 1992)'],
  ['blur.ogg','Blur - Country House'],
  ['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 donde 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:

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

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

numero = 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.

var reproductor = document.getElementById("miaudio");

var source= document.createElement('source');
source.src=lista[numero][0];
source.type="audio/ogg";
	 
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().

reproductor.load();
reproductor.play();

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

function cargarCancion(numero){
		 
  // Cargamos la canción de forma dinámica
  var source= document.createElement('source');
  source.src=lista[numero][0];
  source.type="audio/ogg";
	 
  reproductor.appendChild(source);
	
  reproductor.load();
	
  var texto = document.getElementById("texto");
  texto.innerHTML = lista[numero][1];
	
}

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" cómo ya explicábamos en el artículo «Fin de Audio en HTML5».

reproductor.addEventListener("ended", function(){
  cargarCancion(aleatorio());
});

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.

Actualizado mayo 2022

Como hay un control del «autoplay» para las canciones hemos añadido un botón para poder arrancar la canción de forma aleatoria y que no se arranque automáticamente, ya que se podrían haber dado circunstancias en las cuales no se pueda escuchar. Hay información del «autoplay» en navegadores como Chrome que es interesante leer.

Creamos un sencillo botón para iniciar la canción.

<button id="play">Pulsa para escuchar</button>

Y cuando hagamos click en él arrancaremos el reproductor.

document.getElementById("play").addEventListener("click", function(){
 reproductor.play();
});

 

 

Vídeos sobre HTML5


4 comentarios en “Música aleatoria con HTML5”

Víctor Cuervo

fernando

una pregunta inocente: ¿con éste mismo código, se puede hacer para que se reproduzca aleatoriamente en una USB, conectada a un parlante Bluetooth?

Víctor Cuervo

Víctor Cuervo

Buenas Fernando,

Esto solo lo reproduce en un navegador web.

Saludos.

Víctor Cuervo

Programador

¿Ya no funciona? No parece sonar el ejemplo subido tampoco.

Víctor Cuervo

Víctor Cuervo

Buenas,

El «autoplay» está ya muy controlado por los navegadores y no deja que le cargues la canción a no ser que se den una serie de circunstancias. Puedes leer más información sobre el tema en https://developer.chrome.com/blog/autoplay/

De todas maneras voy a adaptar el artículo para que se pueda ver cómo funciona el tema de la aleatoriedad para cargar canciones, aunque haya que darle al play.

Saludos.

¿Algo que nos quieras comentar?

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

*