Etiqueta HTML <audio>
La etiqueta HTML <audio> permite insertar sonido en páginas web. Aprende sus atributos, formatos compatibles y la política de autoplay.
La etiqueta <audio> es uno de los elementos HTML5 añadidos para permitir incrustar archivos de audio en una página web. Reproduce música, pódcasts, efectos de sonido y cualquier otro flujo de audio con el reproductor nativo del navegador, por lo que ya no necesitas un plugin Flash ni un widget de terceros.
Esta página explica cómo incrustar audio, qué formatos de archivo admiten los navegadores, los atributos que controlan la reproducción (controls, autoplay, loop, muted, preload), la política de autoplay que confunde a casi todos, y cómo hacer el audio accesible.
La etiqueta <source> o el atributo src apuntan al archivo de audio. La ruta puede ser una URL absoluta o relativa. Para vídeo, la etiqueta <video>, estrechamente relacionada, funciona de la misma manera.
Sintaxis
La etiqueta <audio> viene en pares. Puedes establecer el archivo directamente con src, o anidar uno o más elementos <source> entre las etiquetas de apertura (<audio>) y cierre (</audio>) para que el navegador pueda elegir un formato compatible.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Ejemplo de la etiqueta HTML <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Formatos de audio compatibles
No todos los navegadores pueden decodificar todos los códecs, por lo que el audio HTML tiene tres formatos relevantes en la práctica. La tabla siguiente muestra la extensión del archivo, el tipo MIME que se coloca en type="" y la compatibilidad general:
| Formato | Tipo MIME | Compatibilidad |
|---|---|---|
| MP3 | audio/mpeg | Compatible con todos los navegadores modernos. La opción más segura por defecto. |
| WAV | audio/wav | Compatible en todas partes, pero los archivos no están comprimidos y son grandes. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. No Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. No Safari. |
Como MP3 funciona en todos los navegadores, un único <source src="audio.mp3" type="audio/mpeg"> suele ser suficiente. Solo necesitas formatos adicionales si deseas una alternativa libre de royalties (OGG/WebM) o la máxima calidad (WAV).
Cómo elige el navegador una <source>
Cuando anidas varios elementos <source>, el navegador los recorre de arriba hacia abajo y reproduce el primero que puede decodificar — los demás se ignoran. Coloca primero tu formato preferido o más eficiente. El atributo type permite al navegador omitir los formatos que no soporta sin descargarlos, por lo que es una buena práctica incluirlo siempre.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>El atributo controls
Sin controls, el elemento de audio no muestra nada visible y el usuario no tiene forma de iniciarlo. El atributo controls indica al navegador que muestre su interfaz de reproductor nativo (reproducir/pausar, línea de tiempo, volumen):
<audio src="audio.mp3" controls></audio>Ejemplo de la etiqueta HTML <audio> con el atributo controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>El atributo loop
loop es un atributo boolean. Cuando está presente, el clip se reinicia desde el principio cada vez que termina — práctico para música de fondo ambiental o un efecto de sonido en bucle:
<audio src="audio.mp3" controls loop></audio>Autoplay y el atributo muted
Esta es la fuente más común de confusión con el audio HTML, así que léelo con atención.
El atributo autoplay solicita al navegador que comience la reproducción en cuanto el medio esté listo, sin que el usuario pulse el botón de reproducción:
<audio src="audio.mp3" autoplay></audio>En la práctica, los navegadores modernos bloquean el autoplay con sonido. Chrome, Safari y Firefox se niegan a reproducir automáticamente medios audibles hasta que el usuario haya interactuado con la página (un clic, un toque, una pulsación de tecla). Esto protege a las personas de páginas web que emiten sonido inesperadamente. Si configuras autoplay en un clip audible, normalmente simplemente permanecerá en silencio y pausado.
La única forma fiable de que el autoplay funcione es añadir también muted. Un clip silenciado no emite sonido, por lo que el navegador permite que se inicie por sí solo:
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>El atributo muted simplemente inicia el elemento con el volumen apagado; el usuario puede activar el sonido a través de los controles. Para el audio específicamente, un clip en autoplay silenciado rara vez es útil por sí solo, pero el patrón vale la pena conocerlo porque la misma regla rige la etiqueta <video>, donde el autoplay silenciado es muy habitual.
Si realmente necesitas que el sonido comience, activa la reproducción desde una acción del usuario. La API JavaScript del DOM HTML te permite controlar el elemento con métodos como .play() desde un manejador de clics, lo cual el navegador trata como aprobado por el usuario.
El atributo preload
preload es el único atributo de <audio> que toma un valor en lugar de ser boolean. Indica cuánto del archivo debe descargar el navegador antes de que el usuario pulse reproducir:
auto— el navegador puede descargar el archivo completo con antelación. Úsalo cuando esperas que se reproduzca el audio y quieres una reproducción instantánea.metadata— solo descarga metadatos como la duración y los primeros bytes, no el audio en sí. Un buen término medio que permite a los controles mostrar la duración de la pista sin desperdiciar ancho de banda.none— no precargar nada hasta que el usuario interactúe. Lo mejor cuando la página tiene muchos clips, o cuando la mayoría de los visitantes no reproducirán el audio.
<audio src="audio.mp3" controls preload="metadata"></audio>preload es solo una sugerencia — un navegador puede ignorarla para ahorrar datos, y es anulada por autoplay, que fuerza la carga del archivo.
Accesibilidad
El audio que solo existe como sonido excluye a cualquier persona que no pueda escucharlo. Algunas adiciones hacen que el audio incrustado sea inclusivo:
- Proporciona una transcripción de texto. Para audio con mucho diálogo (entrevistas, pódcasts), publica las palabras cerca del reproductor para que los usuarios de lectores de pantalla y los sordos obtengan el mismo contenido.
- Añade subtítulos con
<track>. Un elemento<track kind="captions">permite a los navegadores mostrar texto sincronizado para el audio. - Etiqueta el reproductor con
aria-labelcuando no hay un título visible, para que la tecnología de asistencia anuncie de qué trata el clip. - Usa el texto alternativo entre las etiquetas como degradación elegante: los navegadores que no pueden reproducir el elemento lo muestran en su lugar.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Atributos
La etiqueta <audio> tiene atributos que indican la ruta al archivo de audio, el comportamiento de reproducción, etc. Los atributos controls, autoplay, loop y muted son boolean; sus valores pueden omitirse. Si se especifican, la función correspondiente se activa por defecto.
| Atributo | Valor | Definición |
|---|---|---|
| autoplay | Reproduce el archivo de audio automáticamente tras cargar la página. | |
| controls | Muestra el panel de control (reproducir/pausar, volumen, etc.). Si falta el atributo controls, el audio no será visible en la página. | |
| loop | Repite el archivo de audio continuamente desde el principio cuando termina. | |
| muted | Silencia el audio por defecto. | |
| preload | auto, metadata, none | Define la estrategia de precarga del archivo de audio. |
| src | URL | Especifica la ruta al archivo de audio. |
La etiqueta <audio> admite los Atributos Globales y los Atributos de Evento.