<audio>

<audio> incrusta un reproductor de audio directamente en la página, sin plugins ni JavaScript externo. El navegador provee la interfaz nativa de reproducción (play/pausa, barra de progreso, volumen) cuando el atributo controls está presente. Es el equivalente sonoro de <video>: misma filosofía de atributos, misma mecánica de fuentes múltiples con <source>, mismos gotchas de autoplay.

A diferencia de <video>, <audio> no tiene área visual de contenido — solo la barra de controles. Eso lo hace simple de integrar en cualquier layout: ocupa el espacio que el navegador le asigna a los controles (un bloque horizontal delgado, generalmente). Sin controls, el elemento es completamente invisible: existe en el DOM y puede reproducirse desde JavaScript, pero el usuario no ve ni oye nada.

<audio> tiene etiqueta de apertura y cierre y puede contener hijos <source> para ofrecer el mismo audio en múltiples formatos, de la misma manera que <video>. La mecánica es idéntica: el navegador evalúa los <source> en orden y usa el primero que soporta.

Cómo funciona

El comportamiento de <audio> es análogo al de <video>: el navegador dispara la descarga del archivo (según preload), muestra los controles si controls está presente, y reproduce cuando el usuario hace play o cuando autoplay lo activa. La diferencia es que no hay fotogramas que mostrar, solo la barra de controles.

Para la mecánica de <source> (múltiples formatos, atributos src y type, orden de preferencia, exclusión mutua con src en el padre) funcionan igual que en <video>. Ver video si necesitás los detalles completos.

Modelo de contenido

<audio> es contenido incrustado y de flujo. Puede contener:

• Cero o más elementos <source> (fuentes alternativas del audio).
• Contenido de respaldo (fallback) para navegadores sin soporte (hoy irrelevante).

Display por defecto: en línea (inline), pero los controles se renderizan como un bloque horizontal. En la práctica, casi siempre se trata con CSS como bloque.

Sintaxis

<!-- Patrón A: un solo formato, src en el elemento -->
<audio src="cancion.mp3" controls></audio>

<!-- Patrón B: múltiples formatos con <source> hijos (recomendado) -->
<audio controls>
  <source src="cancion.ogg" type="audio/ogg">
  <source src="cancion.mp3" type="audio/mpeg">
</audio>

Atributos

src

La ruta o URL del archivo de audio. Usalo cuando tenés un solo formato. Si necesitás múltiples formatos para compatibilidad, usá <source> hijos y omití este atributo.

controls

Atributo booleano. Fundamental: sin él, el reproductor es completamente invisible. No hay interfaz de usuario, el audio no se puede iniciar desde la página. Siempre incluilo en contenido editorial.

<audio src="cancion.mp3" controls></audio>

autoplay

Intenta reproducir el audio automáticamente al cargar la página. Gotcha: bloqueado en casi todos los navegadores modernos cuando hay sonido. La única excepción es autoplay muted, pero un audio silenciado sin sentido no tiene mucho uso práctico.

En audio, autoplay con sonido es más invasivo que en video (no hay área visual que avise al usuario). La recomendación general es no usarlo en <audio> salvo en casos muy controlados (aplicación de audio, reproductor de música donde el usuario eligió reproducir con anticipación).

muted

Atributo booleano. Reproduce sin sonido. Necesario para que autoplay funcione. En <audio> tiene poca utilidad editorial (¿para qué reproducir audio sin sonido?), pero es parte de la API compartida con <video>.

loop

Atributo booleano. Al terminar el audio, lo reinicia. Útil para música de fondo o efectos ambientales en juegos o demos interactivos. Evitalo en contenido narrativo o podcasts.

preload

Indica cuánto precargar antes de la interacción. Mismo comportamiento que en <video>:

• none — no precargar. Ideal cuando hay muchos audios en la página.
• metadata (default habitual) — solo metadatos (duración). Buen balance.
• auto — descarga todo el archivo al cargar la página. Consume datos aunque no se reproduzca.

Hijos <source> — múltiples formatos

Funcionan igual que en <video>. El navegador evalúa cada <source> en orden y usa el primero que puede reproducir:

<audio controls>
  <source src="cancion.ogg" type="audio/ogg">
  <source src="cancion.mp3" type="audio/mpeg">
</audio>

Atributos de <source>:

• src — ruta del archivo.
• type — MIME type: audio/mpeg (MP3), audio/ogg, audio/wav, audio/webm.

Los formatos más comunes por compatibilidad: MP3 (audio/mpeg) funciona en todos los navegadores modernos. OGG/Vorbis es más eficiente pero tiene menor soporte en Safari. Para proyectos nuevos, MP3 o WebM Audio son las opciones más seguras.

Accesibilidad

• Un audio con diálogo o información importante debería ir acompañado de una transcripción de texto accesible en la página. A diferencia de <video>, <audio> no tiene <track> para subtítulos (la especificación lo permite pero el soporte es limitado).
• No uses autoplay con sonido. Además de estar bloqueado, puede desorientar a usuarios con lectores de pantalla que ya están escuchando el contenido de la página.
• Si el <audio> está dentro de un <figure>, el <figcaption> puede describir el contenido del audio (título, duración, descripción breve).

Cuándo usar qué

Notas, gotchas e interacción

• Sin controls y sin JavaScript, el audio no se puede reproducir. El elemento existe en el DOM pero el usuario no puede activarlo.
• autoplay con sonido está bloqueado en Chrome, Firefox y Safari modernos. Ver la sección de atributos arriba.
• src en <audio> y <source> hijos son mutuamente excluyentes, igual que en <video>. Si ponés ambos, los <source> se ignoran.
• Cicatriz de este sitio (A.0.5): los archivos de audio no cargan en el sandbox/preview. Los controles aparecen pero no hay reproducción real. Validá la estructura con los checks; el audio lo oís con un archivo real.
• Diferencia con <video>: <audio> no tiene poster (no hay área visual donde mostrarlo) ni <track> con soporte real (la transcripción va aparte en el documento).

Vigente / legacy

<audio> es HTML5 y no tiene equivalente en HTML4. La alternativa pre-HTML5 eran plugins como Flash o QuickTime via <object> — completamente legacy y sin soporte en ningún navegador moderno desde 2020.

El atributo autoplay sin muted era aceptado hasta aproximadamente 2017; hoy está bloqueado por política de usuario en todos los navegadores mayores.

Aprendelo en el recorrido

Esta entrada complementa la lección <audio> y <video>: medios incrustados del módulo Imágenes y medios, donde se practica <audio> con src y controls, y <video> con <source> hijos.

Ver también

• video — reproductor de video; documentación completa de <source>, <track>, autoplay+muted y el patrón de múltiples formatos
• figure — contenedor semántico; <audio> puede ir dentro de <figure> con <figcaption>