Al igual que existe una etiqueta para añadir archivos de video a una página web, también es posible añadir archivos de audio y 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, esta etiqueta ya no está soportada. Hoy en día, usaremos la etiqueta HTML <audio>, que funciona prácticamente igual que <video>, sólo que utilizando archivos de audio.
La etiqueta <audio>
La etiqueta HTML <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 sería utilizar el atributo src para indicar nuestro archivo multimedia de audio:
<audio src="audio.mp3"></audio>
Respecto al formato de audio, hemos indicado un archivo .mp3, que tiene muy buen soporte, pero existen otros formatos que también podrían ser apropiados, como .ogg o .opus.
► Más información: Formatos multimedia (imagen, video y audio)
¿Por qué no suena?
Sin embargo, es importante recalcar que este ejemplo 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
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
mutedpara 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.
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:
- El navegador intentará reproducir el archivo de audio en formato
.opus. - Si no lo soporta, intentará reproducir el formato
.oggvorbis. - Si no lo soporta, intentará reproducir el formato
.mp3. - 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.
