Al igual que vimos en el tema anterior con los videos, es posible añadir archivos de audio a nuestras páginas web para colocar música, 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.
En este caso, utilizaremos la etiqueta <audio> que funciona exactamente igual que <video>, pero con relación a archivos de audio.
Audio (modo básico)
La etiqueta <audio> tiene varios atributos a nuestra disposición:
| Atributo | Valor | Descripción |
|---|---|---|
src |
Dirección URL | Audio a reproducir. Obligatoria si actua como etiqueta contenedora. |
preload |
auto | metadata | none |
Indica como realizar la precarga del audio. |
mediagroup |
nombre | Establece un nombre para un grupo de contenidos multimedia. |
autoplay |
Comienza a reproducir el audio automáticamente. | |
loop |
Vuelve a iniciar el audio cuando finaliza su reproducción (bucle). | |
muted |
Establece el audio sin sonido (silenciado). | |
controls |
Muestra los controles de reproducción. Por defecto no se muestran. |
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 pulsar el botón «play». Tampoco le hemos colocado el atributo autoplay, en cuyo caso tampoco mostraría nada visualmente, pero si que se empezaría a escuchar el sonido o pista de música.
Otro ejemplos básicos para colocar audios en nuestra página:
<audio src="audio.mp3" preload="none" controls></audio>
<audio src="audio.ogg" autoplay loop></audio>
En el primer ejemplo, cargamos un audio en formato MP3, pero indicamos que no precargue nada. Empezará a descargarse sólo cuando el usuario pulse en los controles de reproducción. Este escenario puede ser interesante para evitar consumo de ancho de banda de archivos que es probable que el usuario no escuche o en dispositivos móviles donde las tarifas de datos son costosas.
Por otro lado, el segundo ejemplo, carga un archivo de audio en formato OGG y lo reproduce automáticamente y en bucle, de modo que vuelve a empezar cuando termina.
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 JS.
Formatos de audio
Los archivos de audio estan codificados mediante un codec 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. | Sí, buen soporte |
| AAC | Advanced Audio Coding | Mejora el MP3. Usado como audio en MP4. | Sí, buen soporte |
| OGG | Ogg Vorbis | Buena calidad. Alternativa libre a MP3. | Sí, soporte medio |
| Opus | Opus | Buena calidad. Alternativa libre a MP3. | Sí, soporte medio |
| FLAC | FLAC Audio Lossless | Compresión sin pérdidas. Alto tamaño. | Sí, buen soporte. |
| WAV | Wave sound | Formato de Microsoft. Está soportado. | No, muy pesado |
Otros formatos como ASF/WMA, RA u otros no son apropiados para web. Si te interesa saber más sobre estos temas, aconsejo la lectura del artículo Formatos de audio: Todo lo que deberías saber.
Audio (modo avanzado)
La etiqueta <audio> también puede actuar como etiqueta contenedora e incluir varias etiquetas HTML para dotar de mayor compatibilidad, o capacidades adicionales.
| Etiqueta | Atributos | Descripción |
|---|---|---|
<source> |
src, type |
Establece un archivo de audio o lo añade como alternativa. |
<track> |
src, srclang, label, kind, default |
Establece un archivo de subtítulos o lo añade como alternativa. |
De esta forma, pasamos de un esquema donde solo usabamos una etiqueta <audio> a otro un poco más avanzado, donde <audio> contiene múltiples etiquetas que actúan sobre ese audio en cuestión. Dichas etiquetas pueden ser <source> o <track>:
<audio>
<!-- Aquí etiquetas para añadir funcionalidad extra -->
</audio>
La etiqueta de subtítulos <track> la veremos un poco más adelante, en el capítulo de etiquetas HTML de subtítulos.
Audio alternativo (fallback)
Si utilizamos la etiqueta <audio> como etiqueta contenedora, podemos incluir etiquetas <source> en su interior para proporcionar formatos alternativos y tener mayor compatibilidad con otros navegadores y navegadores antiguos que no soporten HTML5:
<audio>
<source src="audio.opus" />
<source src="audio.ogg" />
<source src="audio.mp3" />
</audio>
En este ejemplo, el navegador intentará reproducir el archivo de audio en formato Opus, en caso de no estar soportado por el navegador, intentará reproducir el formato Ogg Vorbis, y en caso de tampoco soportarlo, reproducirá el formato MP3.
