La etiqueta HTML <audio>

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.