Referencia de etiquetas

Etiqueta audio en HTML: reproducción y alternativas

La etiqueta <audio> incorpora sonido en una página y permite ofrecer controles de reproducción. Úsala para una entrevista, un aviso hablado o una explicación que la persona pueda escuchar cuando quiera. Con controls, el navegador proporciona el reproductor sin que tengas que programarlo con JavaScript.

Ejemplo mínimo: sonido con controles

Este fragmento usa un archivo de bienvenida local. Para copiarlo a otro sitio, descarga el WAV y colócalo en la ruta indicada por src, o cambia esa ruta por la de tu archivo.

<audio controls src="/ejemplos/audio/bienvenida.wav">
  Tu navegador no admite el elemento audio.
</audio>
<p>
  <a href="/ejemplos/audio/bienvenida.wav" download>Descargar audio</a>
</p>
<p>
  Transcripción: Bienvenida a nuestra biblioteca. Puedes escuchar
  este mensaje o leer su transcripción.
</p>

Si el navegador admite el elemento, aparece un reproductor. El sonido comienza al pulsar reproducir; el diseño y los botones disponibles dependen del navegador y del dispositivo. El enlace y la transcripción permanecen visibles fuera del elemento.

El WAV contiene una locución sintetizada en español, preparada para este ejemplo con un texto original. No necesitas un complemento ni un script. Si quitas controls, dejas de solicitar la interfaz nativa; el navegador puede seguir ofreciendo controles, especialmente con JavaScript deshabilitado, según las reglas de interfaz de los medios del estándar HTML. Si retiras todo <audio>, quedan el enlace y el texto, pero ya no hay reproducción dentro de la página.

Sintaxis: elegir entre src y source

<audio> lleva etiqueta de apertura y de cierre. Puede colocarse donde se admita contenido incrustado, por ejemplo dentro de un párrafo, una sección o una figura. Con controls también es contenido interactivo: evita meterlo en otro control, como un botón o un enlace.

Hay dos maneras de indicar el archivo:

src en <audio> selecciona una URL, como en el ejemplo mínimo.
Hijos <source> permiten declarar fuentes candidatas cuando <audio> no tiene src. El navegador las considera en orden para encontrar una que pueda reproducir.

Elige una forma. No añadas un src esperando que los <source> funcionen como alternativas: el algoritmo de selección da prioridad a src y esa mezcla no corresponde al modelo de contenido válido.

Sin src, los <source> van primero; después pueden aparecer pistas <track> y contenido alternativo permitido por el contexto del padre. Con src, pueden aparecer pistas y ese contenido alternativo, pero no <source>. No se pueden anidar elementos <audio> ni <video> dentro del reproductor. Estas reglas están en el modelo de contenido de audio del estándar HTML.

El texto interior está pensado para navegadores que no reconocen <audio>. Un navegador que sí lo reconoce normalmente lo oculta, incluso si falla la carga del archivo. Por eso no sirve como transcripción visible ni como aviso fiable de un error de red.

Formatos, códecs y tipo MIME

El contenedor organiza los datos del archivo; el códec determina cómo se codifica el sonido; el tipo MIME identifica el formato del recurso. La extensión por sí sola no garantiza que el navegador pueda decodificarlo.

En estos ejemplos, WAV es el contenedor y PCM es la codificación del sonido, sin compresión. audio/wav es el tipo MIME empleado en <source>. WAV resulta sencillo para una grabación corta, aunque suele ocupar más que un formato comprimido. MP3 es otra opción habitual: usa codificación MPEG de audio y se identifica como audio/mpeg.

El atributo type pertenece a <source>, no a <audio>, y ayuda a descartar un formato incompatible antes de descargarlo. No convierte el archivo. El servidor también debe entregar un Content-Type adecuado. Si ofreces más de una fuente, aporta archivos reales con el mismo contenido y comprueba cada uno por separado.

Caso práctico: un aviso con transcripción completa

Supón que una biblioteca publica su horario en texto y como mensaje hablado. Descarga el aviso de ejemplo, otra locución sintetizada con texto original, y guarda el archivo en /ejemplos/audio/aviso-biblioteca.wav de tu sitio. También puedes grabar tu propia voz leyendo exactamente el mensaje y sustituir el WAV.

Este es todo el HTML necesario para el aviso; puedes insertarlo en el cuerpo de un documento HTML. No necesita CSS ni JavaScript.

<section aria-labelledby="audio-guia-aviso-titulo">
  <h2 id="audio-guia-aviso-titulo">Aviso de la biblioteca</h2>
  <audio controls preload="metadata"
    aria-labelledby="audio-guia-aviso-titulo">
    <source src="/ejemplos/audio/aviso-biblioteca.wav" type="audio/wav">
    Tu navegador no admite el elemento audio.
  </audio>
  <p>
    <a href="/ejemplos/audio/aviso-biblioteca.wav" download>
      Descargar el aviso en WAV
    </a>
  </p>
  <h3>Transcripción completa</h3>
  <p>
    Biblioteca del barrio. Este viernes abrimos de diez de la mañana
    a dos de la tarde. La entrada es gratuita.
  </p>
</section>

preload="metadata" sugiere cargar información como la duración antes de reproducir. aria-labelledby relaciona el reproductor con el título visible. Si quieres ofrecer también el aviso en otro formato, añade otro <source> con una grabación del mismo mensaje.

Para probarlo, abre el documento servido desde tu sitio y sigue esta secuencia:

Reproduce y pausa el aviso. Comprueba que escuchas el mismo mensaje que aparece en la transcripción.
Llega a los controles con Tab y actívalos con el teclado; en Chromium puedes usar Espacio para reproducir y pausar. Prueba el volumen o el silencio; algunos dispositivos gestionan el volumen mediante controles del sistema.
Desactiva JavaScript: los controles nativos, el enlace y la transcripción siguen disponibles.
Cambia temporalmente la URL por una que no exista. El audio falla, pero la transcripción sigue dando el horario; el enlace tampoco podrá descargar un archivo ausente. Restaura la URL después.

Si sustituyes <audio> por un enlace, el archivo puede abrirse o descargarse, pero ya no se ofrece el reproductor integrado.

Atributos de audio

Atributo	Uso y límite
`controls`	Pide los controles nativos. El navegador puede ofrecerlos también sin el atributo, especialmente con scripts deshabilitados.
`src`	URL del sonido; se omite cuando usas hijos `<source>`.
`preload`	`none` sugiere no precargar; `metadata`, cargar información básica; `auto` o un valor vacío, permitir una carga mayor. Si se omite, decide el navegador. Es una sugerencia.
`autoplay`	Solicita reproducción automática; las políticas del navegador pueden impedirla. Puede prevalecer sobre la sugerencia de `preload`.
`loop`	Solicita volver al principio al llegar al final.
`muted`	Establece el silencio inicial; el usuario puede cambiarlo con los controles.
`crossorigin`	Configura peticiones CORS: `anonymous` evita credenciales hacia otro origen y `use-credentials` las incluye. Requiere una respuesta compatible del servidor. No hace falta añadirlo a estos archivos locales.

controls, autoplay, loop y muted son booleanos: su presencia los activa. autoplay="false" también solicita reproducción automática; para desactivarla elimina el atributo.

id, class, lang y los atributos ARIA son globales. CSS modifica la presentación, pero no codifica el sonido ni sustituye los controles. volume, currentTime y el método play() pertenecen a la API de JavaScript; volume="0.5" no es un atributo HTML válido para ajustar el volumen.

Accesibilidad y reproducción voluntaria

Para hacer accesible un audio, ofrece una transcripción completa fuera del reproductor, próxima a él o mediante un enlace claro. Incluye las palabras, quién habla cuando sea relevante y los sonidos necesarios para entender el contenido; un resumen puede omitir información esencial. La guía de transcripciones de WAI explica cómo preparar esa alternativa textual.

Conserva controles que se puedan operar con teclado y revisa sus nombres en el contexto de la página. No reproduzcas sonido al entrar ni pongas varios ejemplos a sonar a la vez. Los controles nativos son un buen punto de partida; crear botones personalizados exige implementar y comprobar toda la interacción.

<track> puede asociar pistas de texto, pero no debes contar con subtítulos visibles uniformes en un reproductor de audio. Cuando necesitas una alternativa visual sincronizada, valora <video> con pistas apropiadas. Para el aviso de esta guía basta una transcripción visible y completa.

Errores frecuentes y preguntas

¿Por qué no funciona autoplay? El navegador puede exigir interacción previa, un permiso o condiciones específicas para iniciar sonido. No supone que el HTML esté mal. Prioriza una acción voluntaria con controls; la guía de reproducción automática de MDN describe estas políticas. Silenciar el audio no es una solución útil si la persona necesita escucharlo.

¿Por qué no aparece el reproductor? Comprueba que has escrito controls y que CSS no oculta el elemento. Tener una URL en src no solicita por sí solo una interfaz visible.

¿Por qué aparece, pero no suena? Revisa en este orden: silencio y volumen, respuesta de la URL en la pestaña de red, formato real del archivo y cabeceras del servidor. Un 404, un archivo dañado o un códec incompatible no se arreglan añadiendo autoplay.

<source> aporta fuentes al reproductor; <audio> reproduce sonido; <video> incorpora imagen en movimiento y <track> aporta pistas de texto. Un enlace con la etiqueta a sirve para acceder al archivo cuando no necesitas reproducirlo en la propia página.

Compatibilidad y fuentes

El elemento <audio> está ampliamente disponible en los navegadores actuales, según MDN: audio y su compatibilidad. Eso no garantiza soporte de todos los códecs ni controles idénticos en cada dispositivo.

Fuentes contrastadas el 4 de octubre de 2026. Los archivos WAV de estos ejemplos y sus controles se comprobaron en Chromium de escritorio; las pruebas con anchura móvil verifican la presentación, sin sustituir una prueba en un teléfono real. Consulta el estándar para las reglas de autoría y prueba tus archivos en los navegadores y dispositivos de tu audiencia.