En este ejercicio vamos a hacer una ventana emergente una única vez.
Los conceptos que aplicaremos son:
- Centrado vertical y horizontal de una caja con CSS.
- Uso de setTimeOut()
- Creación de un nodo de tipo <audio>.
Vamos a repasarlo mediante un ejercicio.
Enunciado
Haz un documento web que pasados 5 segundos desde su carga haga aparecer una imagen de 600px x 300px centrada vertical y horizontalmente y que suene el sonido adjunto.
Utiliza el siguiente código html:
<div id="emergente"></div>Solución del ejercicio
La solución del ejercicio consiste en tener una capa oculta que cuando nos interese mostraremos.
Para conseguir el sonido asignaremos los atributos correspondientes de la etiqueta <audio> en el momento adecuado.[vc_custom_heading text=»Código CSS usado» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
*{margin:0;padding:0;box-sizing:border-box;}
#emergente{
position:absolute;
width:600px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-300px;
background:url(susto.jpg) 0 0 no-repeat;
box-shadow: 0px 0px 50px #000;
border-radius: 10px;
display:none;
}[vc_custom_heading text=»Explicación del código CSS» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]El código CSS describe una caja centrada vertical y horizontalmente con un fondo en la que encontramos la imagen adjunta en el ejercicio. La imagen está en la raíz de proyecto al mismo nivel que el documento index.html.
Para estilizar un poco la imagen y dar un efecto más flotante se aplican las propiedades box-shadow y border-radius.
Inicialmente la capa está oculta con display:none;[vc_custom_heading text=»Código JS usado» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
window.onload = init;
function init(){
setTimeout(susto,2000);
}
function susto(){
document.getElementById("emergente").style.display="block";
sonido = document.createElement("audio")
sonido.src="dragonBall.mp3";
document.getElementById("emergente").appendChild(sonido);
sonido.play();
}[vc_custom_heading text=»Explicación del código javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]Cuando se termina de cargar todo el documento se carga la función init. (fijaros que no lleva paréntesis para que javascript se espere a la carga completa del documento)
Dentro de la función init(){} se ejecuta a los 2 segundos la función sonido.
La función sonido modifica en primer lugar la propiedad display de la capa para hacerla visible.
En segundo lugar crea un nodo de tipo audio y al que asigna el atributo src.
Finalmente se ejecuta .play().
Si juntamos todas las piezas resolvemos el ejercicio.
OBSERVACIÓN IMPORTANTE: Notar que Chrome bloquea la reproducción de sonido mediante javascript. La solución propuesta reproduce el sonido en Safari y en Mozilla pero no en Chrome. La explicación oficial que se encuentra en los foros de Developpers de Google es que de este modo se evita que para las versiones teléfono haya tanto consumo de datos i/o que se reproduzcan sonidos en momentos poco orportunos.¡Hola!
Querido lector,
¿Te animas a hacer el mismo ejercicio pero con un formulario de suscripción a una newsletter?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta