En esta unidad crearemos una aplicación con una galería interactiva de botones de audio, diseñada para reproducir sonidos de Halloween y Navidad. La interfaz está organizada en dos tablas temáticas: una para Halloween y otra para Navidad, cada una con imágenes representativas que, al hacer clic, activan la reproducción de un sonido específico.
Imágenes y sonidos
A continuación se muestran posibles imágenes y audios que puedes usar. Además, puedes hacer clic en estos enlaces para descargarte un zip con todas las imágenes y todos los sonidos.
Halloween
Navidad
Fichero «index.html»
El archivo index.html define la estructura básica de la aplicación, que es una galería de botones de audio con imágenes interactivas. A continuación explicamos cada parte del archivo.
Cabecera (<head>)
El código que se encuentra en esta primera sección del archivo se encarga de lo siguiente:
- Define el título de la página («Instant buttons»).
- Incluye enlaces a fuentes personalizadas de Google Fonts:
- Creepster: utilizada para el tema de Halloween.
- Mountains of Christmas: utilizada para el tema de Navidad.
- Vincula la hoja de estilos
style.css, donde están los estilos para el fondo, las fuentes, y los efectos visuales de las imágenes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instant buttons</title>
<!-- Fuentes personalizadas desde Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Creepster&family=Mountains+of+Christmas:wght@400;700&display=swap" rel="stylesheet">
<!-- Archivo de estilos CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>
Cuerpo de la página (<body>)
Dentro del cuerpo, se encuentran dos tablas temáticas: una de Halloween y otra de Navidad.
Tabla de Halloween
- Utiliza la clase
halloweenpara aplicar estilos específicos desdestyle.css, como el color rojo y la fuenteCreepster. - Cada celda (
<td>) contiene una imagen y tiene un eventoonclickque ejecuta la funciónplaycon dos parámetros: el nombre del archivo de sonido y el volumen de reproducción. - Los archivos de imagen se encuentran en una carpeta llamada
imgy están nombrados de forma consecutiva para cada botón (por ejemplo,halloween1.webp,halloween2.webp, etc.).
<table class="halloween">
<caption>Halloween</caption>
<!-- Fila 1 de botones de Halloween -->
<tr>
<td onclick="play('halloween1', 0.5)"><img src="img/halloween1.webp"></td>
<td onclick="play('halloween2', 0.7)"><img src="img/halloween2.webp"></td>
<td onclick="play('halloween3', 0.7)"><img src="img/halloween3.webp"></td>
</tr>
<!-- Fila 2 de botones de Halloween -->
<tr>
<td onclick="play('halloween4', 0.7)"><img src="img/halloween4.webp"></td>
<td onclick="play('halloween5', 0.7)"><img src="img/halloween5.webp"></td>
<td onclick="play('halloween6', 0.7)"><img src="img/halloween6.webp"></td>
</tr>
<!-- Fila 3 de botones de Halloween -->
<tr>
<td onclick="play('halloween7', 0.7)"><img src="img/halloween7.webp"></td>
<td onclick="play('halloween8', 1.0)"><img src="img/halloween8.webp"></td>
<td onclick="play('halloween9', 1.0)"><img src="img/halloween9.webp"></td>
</tr>
</table>
Tabla de Navidad
- Sigue la misma estructura que la tabla de Halloween, pero está estilizada con la clase
christmas, que aplica un color azul y la fuenteMountains of Christmas. - Las imágenes de Navidad también están organizadas en una cuadrícula de tres filas y tres columnas, cada una con un archivo de audio distinto.
<table class="christmas">
<caption>Christmas</caption>
<tr>
<td onclick="play('christmas1', 0.7)"><img src="img/christmas1.webp"></td>
<td onclick="play('christmas2', 1.0)"><img src="img/christmas2.webp"></td>
<td onclick="play('christmas3', 0.7)"><img src="img/christmas3.webp"></td>
</tr>
<tr>
<td onclick="play('christmas4', 0.7)"><img src="img/christmas4.webp"></td>
<td onclick="play('christmas5', 0.7)"><img src="img/christmas5.webp"></td>
<td onclick="play('christmas6', 1.0)"><img src="img/christmas6.webp"></td>
</tr>
<tr>
<td onclick="play('christmas7', 0.7)"><img src="img/christmas7.webp"></td>
<td onclick="play('christmas8', 1.0)"><img src="img/christmas8.webp"></td>
<td onclick="play('christmas9', 1.0)"><img src="img/christmas9.webp"></td>
</tr>
</table>
Elemento de audio y JavaScript
Antes de cerrar el elemento <body> de nuestra página web, deberemos incluir un elemento <audio> que utilizaremos para reproducir los sonidos, y también deberemos enlazar el fichero con el código JavaScript:
...
<body>
...
<audio id="player"></audio>
<script src="script.js"></script>
</body>
</html>
- Elemento
<audio>: Este elemento, con elid="player", se usa para reproducir los archivos de sonido. Al hacer clic en cada imagen, la función JavaScriptplaymodifica su fuente (src) y volumen, y luego reproduce el audio seleccionado. - JavaScript: Al final del archivo se carga el script
script.js, que contiene la funciónplaypara controlar la reproducción de audio cuando se hace clic en una imagen.
En resumen…
El archivo index.html estructura la página, definiendo tablas temáticas interactivas para reproducir sonidos festivos de Halloween y Navidad mediante el uso de JavaScript y estilos en CSS para mejorar la experiencia visual y sonora.
El archivo script.js es un código JavaScript sencillo que controla la reproducción de sonidos al hacer clic en las imágenes de la galería. A continuación, explicamos la función principal de este archivo.
Fichero «script.js»
Nuestra aplicación de instant buttons utiliza sólo una sencilla función javascript para reproducir los audios con ajuste de volumen incluido. A continuación se muestra todo el código necesario agrupado en la función play:
function play(soundName, soundVolume) {
// Obtener el elemento de audio
const player = document.getElementById("player");
// Cambiar el archivo de audio a reproducir
player.src = `audio/${soundName}.mp3`;
// Cambiar el volumen del audio
player.volume = soundVolume;
// Reproducir el audio
player.play();
}
Explicación detallada de la función play
Esta función play recibe dos parámetros, soundName y soundVolume, y se ejecuta cada vez que se hace clic en una de las imágenes en el archivo index.html. La función realiza los siguientes pasos:
- Obtener el elemento de audio:
const player = document.getElementById("player");
Utiliza document.getElementById("player") para obtener el elemento de audio <audio id="player"> en el archivo HTML. Este elemento de audio es el que realmente reproduce los sonidos.
- Cambiar el archivo de audio:
player.src = `audio/${soundName}.mp3`;
Modifica la propiedad src del elemento player para cambiar el archivo de audio que se va a reproducir. La función construye la ruta del archivo de audio usando el nombre del archivo pasado como parámetro soundName (por ejemplo, halloween1, christmas2, etc.). Así, si soundName es halloween1, la función buscará y cargará el archivo audio/halloween1.mp3.
- Ajustar el volumen:
player.volume = soundVolume;
Cambia el volumen de reproducción del audio estableciendo la propiedad volume del elemento player. Este valor se toma del parámetro soundVolume, que es un número entre 0 (silencio) y 1 (volumen máximo). Por ejemplo, algunos sonidos tienen un volumen de 0.7 y otros de 1.0 en función de la experiencia que se quiera dar al usuario.
- Reproducir el sonido:
player.play();
Finalmente, llama al método play() del elemento player para iniciar la reproducción del archivo de audio con el archivo y volumen especificados.
En resumen…
La función play es un controlador de reproducción de sonido que:
- Cambia el archivo de audio a reproducir.
- Ajusta el volumen de la reproducción.
- Inicia la reproducción del archivo de audio.
Esta función permite que, al hacer clic en las imágenes de la galería, cada imagen reproduzca un sonido específico asociado a la festividad (Halloween o Navidad) con el volumen predefinido en la función onclick del HTML.
Fichero «style.css»
El archivo style.css contiene los estilos visuales de la aplicación, desde el fondo animado hasta los efectos visuales para cada imagen y tabla temática. A continuación, explicamos cada sección del código CSS.
Fondo animado con gradiente
body {
background: linear-gradient(90deg, #1a1a1a, #003c5a, #0086c9, #9001d7);
background-size: 200% 100%;
animation: aurora 2.5s infinite alternate;
}
- Gradiente de colores: El fondo de la página es un gradiente lineal que pasa por varios tonos oscuros y fríos (negro, azul oscuro, azul brillante y morado). Esto crea un ambiente visual similar a una aurora boreal.
- Tamaño del fondo:
background-size: 200% 100%;hace que el gradiente se duplique en ancho, lo que permite que el fondo se mueva de lado a lado. - Animación:
animation: aurora 2.5s infinite alternate;activa una animación de ida y vuelta cada 2.5 segundos, creando el efecto de movimiento en el fondo.
@keyframes aurora {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
- Animación
aurora: Define una transición que mueve el gradiente de izquierda a derecha en el 100% del ancho, y luego vuelve al inicio, lo que da el efecto de aurora en movimiento.
Estilos para las imágenes de los botones
img {
width: 100%;
max-width: 250px;
transition: 0.5s ease;
}
img:active {
transform: scale(1.5);
filter: brightness(0.75) contrast(1.25);
box-shadow: 0 0 20px black;
}
- Ancho de las imágenes:
width: 100%asegura que las imágenes ocupen todo el ancho de la celda.max-width: 250pxlimita el tamaño máximo de las imágenes en pantallas grandes. - Transición suave:
transition: 0.5s easeaplica una transición suave al hacer clic en las imágenes. - Efecto al hacer clic (
:active): Cuando una imagen es presionada, se agranda un 50% (transform: scale(1.5)), se oscurece ligeramente (brightness(0.75)) y aumenta el contraste (contrast(1.25)), además de aplicar una sombra negra para resaltar el efecto de interacción.
Estilos para las tablas de Halloween y Navidad
Cada tabla tiene estilos específicos que incluyen una fuente, color y sombra para dar un ambiente acorde a la festividad.
Tabla de Halloween
.halloween {
font-size: 250%;
color: red;
font-family: 'Creepster', cursive;
text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;
}
- Fuente: La tabla de Halloween usa la fuente
Creepster, que tiene un estilo tenebroso. - Color: El color del texto es rojo (
color: red;). - Sombra de texto: Aplica una sombra oscura y difusa (
text-shadow: 3px 3px 4px black, -3px -3px 4px #550000;), dando un efecto de terror al texto.
Tabla de Navidad
.christmas {
font-size: 250%;
font-weight: bold;
color: blue;
font-family: 'Mountains of Christmas', cursive;
text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;
}
- Fuente: Utiliza
Mountains of Christmas, que tiene un estilo festivo. - Color: El color del texto es azul (
color: blue;). - Sombra de texto: Usa sombras suaves en azul claro y blanco (
text-shadow: 2px 2px 5px #00aaff, -2px -2px 5px #ffffff;) para dar un efecto festivo de brillo.
Estilos generales para las tablas
table {
margin: auto;
}
- Centrado de las tablas: La propiedad
margin: auto;centra las tablas horizontalmente en la página.
En resumen…
Este archivo CSS define la estética de la aplicación:
- Un fondo animado tipo aurora boreal.
- Efectos interactivos para las imágenes de los botones.
- Estilos específicos para cada tabla (Halloween y Navidad) con colores y fuentes temáticas.
Estos estilos ayudan a crear una experiencia visual inmersiva y coherente con cada festividad.
Ejercicios propuestos
Cambiar la orientación de la animación de fondo
Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal se produzca con un movimiento de arriba hacia abajo y viceversa. Para ello basta con que modifiques el ángulo del gradiente a 180 grados, el tamaño del fondo al doble de alto, y el porcentaje de la animación en el eje Y de 0% a 100%:
/* Fondo con gradiente animado vertical tipo aurora */ body { /* Cambiamos el ángulo del gradiente a 180 grados para que vaya de arriba hacia abajo */ background: linear-gradient(180deg, #1a1a1a, #003c5a, #0086c9, #9001d7); /* Ajustamos el tamaño del fondo para que solo se duplique en altura */ background-size: 100% 200%; /* Mantiene la misma animación */ animation: aurora 2.5s infinite alternate; } /* Animación de gradiente tipo aurora en vertical */ @keyframes aurora { /* Fijamos la posición horizontal en 50% y animamos solo la posición vertical */ 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
Animación de fondo radial
Prueba a cambiar la orientación de fondo para que el efecto de aurora boreal sea de tipo radial con movimiento diagonal. Para ello basta con que definas el gradiente con
radial-gradient(circle, ...), y luego dupliques el tamaño del fondo al doble de ancho y de alto, y en último lugar cambies los porcentajes de la animación en ambos ejes de 0% a 100%:/* Fondo con gradiente animado tipo aurora */ body { /* Cambiamos a un gradiente radial para un efecto más llamativo */ background: radial-gradient(circle, #1a1a1a, #003c5a, #0086c9, #9001d7); /* Ajustamos el tamaño del gradiente para que cubra más área */ background-size: 200% 200%; /* Mantiene la misma animación */ animation: aurora 2.5s infinite alternate; } /* Animación de gradiente tipo aurora */ @keyframes aurora { /* Modificamos la posición inicial y final para adaptarla al gradiente radial */ 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
Diferentes colores de fondo
Prueba a cambiar los colores de la animación de fondo. Para ello solo debes cambiar los colores de la propiedad
backgrounddentro del selectorbody. Por ejemplo:/* Fondo con gradiente animado tipo aurora de Halloween */ body { /* Usamos colores típicos de Halloween en el gradiente radial */ background: radial-gradient(circle, black, purple, orange, darkred); ... } ...
Utiliza tus propias imágenes y graba tus propios audios
Prueba a usar otras imágenes y otros audios. Puedes encontrar imágenes y audios gratuitos en los siguientes enlaces:
También puedes grabar tus audios e incluirlos directamente en la aplicación. Puedes utilizar tu propio móvil o alguna página web online similar a la siguiente:
Compilar la aplicación para móvil
Prueba a compilar la aplicación para móvil, y así podrás pulsar sobre las imágenes como si fueran botones. Puedes seguir las instrucciones detalladas aquí.
Ten en cuenta que el tamaño máximo para la aplicación en formato móvil es de 10MB, por lo que no podrás utilizar imágenes y audios demasiado grandes. Recomendamos el formato
webppara imágenes ymp3para audio. Puedes cambiar el formato o bajar la calidad de los ficheros con alguna herramienta online. Por ejemplo:Imágenes:
Audios:
Añadir efecto de vibración al pulsar sobre cada imagen
Puedes añadir efecto de vibración muy fácilmente añadiendo la siguiente línea dentro de la función
playdel ficheroscript.js:function play(soundName, soundVolume) { ... // Si la vibración está disponible (en el móvil por ejemplo), vibrar durante 100 ms if (navigator.vibrate) navigator.vibrate(100); }
El resultado
En este enlace puedes probar esta versión de la aplicación instant buttons.
