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

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

5
(2)

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:

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

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.