Hoy vamos a hablar de la etiqueta <audio> en HTML, una etiqueta que nos permite escuchar música directamente en nuestra página web o encualquier documento HTML.
No es una etiqueta dificil de usar, pero como todo en esta vida, tiene sus trucos que vamos a desvelar hoy.
Por cierto, recuerda que esta lección forma parte del Diccionario HTML de Dropcoding. Si tienes cualquier duda de este lenguaje, solo tienes que consultarlo!
¿Qué es la etiqueta <audio> en HTML?
La etiqueta <audio> en HTML se utiliza para insertar audio en nuestra página web o cualquier documento en HTML. Esta etiqueta está diseñada para permitir al usuario reproducir, pausar y controlar el volumen del archivo de audio.
Además, incluye atributos que permiten especificar la fuente del archivo de audio, así como los controles deseados. De hecho, la etiqueta <audio> se creó para ofrecer una manera sencilla de insertar audio en un sitio web sin la necesidad de utilizar librerías externas como Flash o Java.
Ejemplo de cómo se utiliza la etiqueta <audio>
Para ilustrar cómo se utiliza, vamos a ver un ejemplo. Dentro del cuerpo de nuestro documento HTML, tenemos la etiqueta <audio>.
Dentro de esta etiqueta, tenemos la etiqueta <source> que indica la ruta de la canción o la pista de audio que queremos reproducir. Para que aparezcan los controles y podamos reproducir o parar la pista de audio, le pasamos el atributo controls.
<audio controls>
<source src="ruta-de-la-cancion.mp3" type="audio/mpeg">
</audio>
En este ejemplo, la canción se reproducirá automáticamente cuando se cargue la página. Si queremos que la canción se repita una y otra vez, podemos agregar el atributo loop.
<audio controls autoplay loop>
<source src="ruta-de-la-cancion.mp3" type="audio/mpeg">
</audio>
Atributos de la etiqueta AUDIO
los atributos de la etiqueta <audio> en HTML son opciones que puedes usar para personalizar el comportamiento del elemento de audio en tu página web. Aquí te dejo una tabla con los atributos más comunes y su descripción:
| Atributo | Descripción |
|---|---|
src | Especifica la ruta del archivo de audio. |
controls | Muestra los controles de audio (play, pause, volumen). |
autoplay | El audio comenzará a reproducirse tan pronto como esté listo. |
loop | El audio se repetirá desde el principio cada vez que termine. |
muted | El audio se cargará en silencio. |
preload | Especifica si y cómo se debe cargar el audio cuando se carga la página. Los valores pueden ser: auto, metadata (carga solo metadatos), none (no carga el audio al cargar la página). |
volume | Establece el volumen inicial del audio. Debe ser un número entre 0.0 (silencio) y 1.0 (volumen máximo). |
Conclusión
Como puedes ver, la etiqueta <audio> es muy fácil de usar y puede ser muy útil en ciertas ocasiones. Sin embargo, es importante recordar que poner música en una página web o en un documento HTML no es lo más habitual.
Aunque puede ser una buena forma de sorprender a tus visitantes, también puede resultar molesto para algunos.
Espero que te haya sido útil esta lección y que ahora tengas una mejor comprensión de cómo usar la etiqueta <audio> en HTML.
Recuerda que si tienes alguna duda o sugerencia, puedes dejarla en los comentarios. ¡Nos vemos en la próxima lección! Adiós.