DROPCODING BLOG

La Etiqueta AUDIO en HTML: Cómo Insertar Música en tu Página Web

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!

Contents

¿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:

AtributoDescripción
srcEspecifica la ruta del archivo de audio.
controlsMuestra los controles de audio (play, pause, volumen).
autoplayEl audio comenzará a reproducirse tan pronto como esté listo.
loopEl audio se repetirá desde el principio cada vez que termine.
mutedEl audio se cargará en silencio.
preloadEspecifica 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).
volumeEstablece 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.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *