La etiqueta HTML <audio>

Etiqueta HTML para indicar archivos de audio en nuestra web

Al igual que vimos en el tema anterior con los archivos de video, también es posible añadir archivos de audio en nuestra web para colocar conversaciones de voz, podcasts, sonidos o simplemente usar música como ambientación.

En versiones anteriores de HTML se usaba una etiqueta HTML obsoleta denominada <bgsound> que realizaba algo similar. Actualmente, no debe ser utilizada. Hoy en día, utilizaremos la etiqueta HTML <audio>, que funciona prácticamente igual que <video>, sólo que utilizando archivos de audio.

La etiqueta <audio> tiene varios atributos que podemos utilizar:

Atributo Descripción
src Audio a reproducir. Obligatoria si no contiene etiquetas <source>.
preload Indica como realizar la precarga del audio.

El atributo src

Un primer ejemplo muy básico para colocar un audio en nuestra página web:

<audio src="audio.mp3"></audio>

Sin embargo esto no mostrará nada visualmente, ni reproducirá ningún sonido. Realmente, el audio está ahí, pero no le hemos indicado el atributo controls para que muestre los controles y que el usuario pueda ver que se trata de un archivo de audio para reproducirlo pulsando el botón «play». Al no haberle colocado tampoco el atributo autoplay, no empezará a reproducir el sonido de forma automática.

OJO: Los navegadores han cambiado la política de autoreproducción con autoplay. Para evitar el uso abusivo de audio en una página sin permiso del usuario, los navegadores exigen que el usuario haya interactuado con la página con anterioridad (y posterior a la carga inicial). Lo aconsejable sería utilizar botones o areas pulsables para activar el sonido mediante Javascript.

Atributos de control

De la misma forma que las etiquetas <video>, a las etiquetas <audio> se les puede indicar atributos para activar o desactivar características. Simplemente añadiendo el atributo (sin valor asociado) activaremos la característica en cuestión.

Los atributos son los siguientes:

Atributo Descripción
loop Establece que el audio se repita al acabar (modo bucle).
muted Establece el audio como muteado (silenciado).
controls Muestra los controles de reproducción. Por defecto no se muestran.
autoplay Comienza a reproducir el audio automáticamente al cargar la página.

Veamos un ejemplo real aplicado con estos atributos:

<audio src="audio.mp3" controls autoplay loop></audio>

Hemos cargado un audio en formato .mp3. Se mostrará con los controles de reproducción (play, duración, volumen, etc...) y reproducirá el sonido de forma automática. Una vez termine el audio, volverá a empezar, ya que está en modo bucle.

Aunque no es muy habitual en un audio, podemos utilizar el atributo muted para mutear el archivo de audio y que se encuentre silenciado. Esta característica puede tener más utilidad al hacerlo de forma dinámica desde Javascript bajo ciertas situaciones.

Precarga de audio

Utilizando el atributo preload podemos indicar al navegador el comportamiento de descarga anticipada que queremos realizar con el archivo de audio. Por ejemplo, observa este fragmento de código:

<audio src="audio.ogg" preload="none"></audio>

El archivo audio.ogg empezará a descargarse sólo cuando el usuario pulse en el botón Play de los controles de reproducción, ya que hemos establecido none en el atributo preload, que indica que no precargue el archivo.

Los valores que puede tomar el atributo preload son los siguientes:

Valor Descripción
auto Valor por defecto. EL navegador decide si debe descargar el audio de forma anticipada o no.
none Se le indica al navegador que no descargue el audio hasta que se pulse el botón de play.
metadata Se le indica al navegador que descargue los metadatos del audio, pero no el audio en sí.

Este escenario puede ser interesante para evitar consumo de ancho de banda de archivos que puede ser probable que el usuario no escuche, o en dispositivos móviles donde las tarifas de datos son costosas y no queremos descargar hasta que el usuario lo haga explícitamente.

Formatos de audio

Los archivos de audio estan codificados mediante un códec específico, y es importante conocer estos detalles para saber que formatos están soportados por los diferentes navegadores.

A continuación tenemos un listado de los formatos/codecs de audio más conocidos y utilizados:

Formato Codec utilizado Características ¿Recomendado?
MP3 MPEG Layer-3 Buena calidad. Buen soporte
AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4. Buen soporte
OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3. ⚠️ Cuidado con Safari
Opus Opus Buena calidad. Alternativa libre a MP3. ⚠️ Cuidado con Safari
FLAC FLAC Audio Lossless Muy buena calidad (sin pérdidas). Tamaño superior. Buen soporte.
WAV Wave sound Formato de Microsoft. Está soportado. ❌ Muy pesado

Otros formatos como ASF/WMA, RA u otros no son apropiados para web.

Audios con fallbacks o extras

La etiqueta <audio> también puede actuar como etiqueta contenedora e incluir varias etiquetas HTML para dotar de mayor compatibilidad, o capacidades adicionales.

Las etiquetas que podemos indicar en el interior de una etiqueta <audio> son las siguientes:

Etiqueta Descripción
<source> Establece un archivo de audio principal o alternativo.
<track> Establece un archivo de subtítulos principal o alternativo.

Las etiquetas de subtítulos <track> las veremos en el próximo artículo. Veamos ahora, un ejemplo donde utilizaríamos una etiqueta <audio> con varias alternativas establecidas con etiquetas <source> para proporcionar mayor compatibilidad con otros navegadores y navegadores antiguos que no soporten ciertos formatos:

<audio>
  <source src="audio.opus">
  <source src="audio.ogg">
  <source src="audio.mp3">
</audio>

En este ejemplo, observa que no hemos establecido el atributo src en el elemento <audio> contenedor, sino en cada una de las etiquetas <source> de su interior. Ocurrirá lo siguiente:

  1. El navegador intentará reproducir el archivo de audio en formato .opus.
  2. Si no lo soporta, intentará reproducir el formato .ogg vorbis.
  3. Si no lo soporta, intentará reproducir el formato .mp3.
  4. En caso de no soportar ninguno, no reproducirá nada.

De esta forma, podemos establecer varias opciones para aprovechar los formatos modernos, y en caso que no estén soportados, utilizar formatos más antiguos o tradicionales.

Volver Al índice
Acceder a Discord Comunidad de Manz.dev

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev