Insertar y eliminar sonido con javascript en una página web

A la gran mayoría nos molesta entrar en una web y que se empiece a reproducir música o vídeo sin que lo hayamos pedido.

De todos modos insertar un sonido mediante javascript en una página web es un ejercicio académico muy interesante.

Para ello es útil dominar los siguientes conceptos:

• Asignar eventos a un documento web y/o elementos del DOM.
• Uso de addEventListener()
• Uso de removeEventListener()
• No siempre usaremos preventDefault() aunque si entendimiento puede venir bien.
• Crear, modificar y añadir nodos al DOM.

Por todo ello añadir un sonido a una página web es un buen ejercicio para repasar conceptos.

Para ello veremos un pequeño ejemplo en el que queremos crear una página web con dos botones. Uno para hacer sonar un sonido y otro para apagarlo.

Veamos el html y el css del ejemplo propuesto.

Código html del ejemplo

<div id="despertador">
	<span id="play">play</span>
	<span id="stop">stop</span>
	<!-- <iframe src="audio/pajaritos.mp3" controls>
	</iframe> -->
</div>

Como curiosidad fijaros que el iframe aparece comentado.

Esto se debe a que más adelante lo añadiremos mediante javascript.

¿Por otro lado porqué uso la etiqueta iframe en lugar de audio?

No me he vuelto loco. Chrome recientemente ha bloqueado el atributo autoplay.

Código css del ejemplo

#play,#stop{
	display:inline-block;
	padding:16px;
	border:1px solid #000;
	border-radius
	:5px;
}
iframe{display:none;}

El audio

Para el ejemplo mostrado he usado este audio[button target=»_self» hover_type=»default» text=»Descargar audio pajaritos.mp3″ link=»https://francescricart.com/wp-content/uploads/2019/05/pajaritos.mp3″]

El código javascript

El código se divide en 3 bloques.

1. El primer bloque asigna los eventos click a los botones. No se usan funciones anónimas con la previsión de reutilizar el código.
2. El segundo bloque desarrolla la función sonarPajaros()
   • Crea un nodo iframe al que le asigna un src con la url del audio y a continuación lo anexiona al DOM. Como el audio es un audio en realidad da igual anexionarlo directamente al body o cualquier otra etiqueta.
   • Una vez añadido el audio eliminamos el evento click del botón play para que no se puedan añadir más audios.
3. El tercer bloque desarrolla la función pararPajaros()
   • En el caso de existir un iframe eliminamos el nodo iframe.
   • A continuación se vuelve a asignar el evento click asociado a sonarPajaros() al botón play.

window.addEventListener("load",function(){
	document.getElementById("play").addEventListener("click",sonarPajaros);
	document.getElementById("stop").addEventListener("click",callarPajaros);			
});

function sonarPajaros(){
	var sonido = document.createElement("iframe");
	sonido.setAttribute("src","audio/pajaritos.mp3");
	document.body.appendChild(sonido);
	document.getElementById("play").removeEventListener("click",sonarPajaros);
}

function callarPajaros(){
	var iframe = document.getElementsByTagName("iframe");

	if (iframe.length > 0){
		iframe[0].parentNode.removeChild(iframe[0]);
		document.getElementById("play").addEventListener("click",sonarPajaros);
	}
}

¿Quieres ver la resolución paso a paso en el aula?

La calidad del audio no es óptima pero se oye bien.

Este vídeo es un directo en el aula con el paso a paso.¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!