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:

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:

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:

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:

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:

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.