Para poner audio en HTML, utiliza la etiqueta <audio> con el atributo controls y la ruta de un archivo compatible. Así puedes añadir una entrevista, una explicación o una muestra de sonido sin instalar un reproductor externo.
<audio controls src="audio/leccion.mp3">
Tu navegador no admite este reproductor.
</audio>Guarda un archivo de audio real en la ruta indicada. Si estás trabajando en local, crea la carpeta audio junto al archivo HTML y coloca dentro leccion.mp3.
Ejemplo de reproductor de audio para copiar
Este ejemplo añade un título, el reproductor y una alternativa de descarga:
<section aria-labelledby="titulo-audio">
<h2 id="titulo-audio">Introducción al curso</h2>
<audio controls preload="metadata">
<source src="audio/leccion.mp3" type="audio/mpeg">
Tu navegador no admite audio HTML.
</audio>
<p><a href="audio/leccion.mp3" download>Descargar la lección en MP3</a></p>
<h3>Transcripción</h3>
<p>Bienvenido. En esta lección aprenderás la estructura básica de una página.</p>
</section>
<style>
audio { display: block; width: 100%; max-width: 560px; }
</style>El enlace de descarga está fuera de audio para que siempre resulte visible. El atributo download tiene restricciones de origen y el servidor también puede influir en cómo se abre o descarga el archivo.
Para qué sirven controls, preload y loop
controls muestra los botones que ofrece el navegador. Su diseño puede cambiar entre Chrome, Firefox, Safari y distintos sistemas operativos. Esa diferencia es normal.
preload="none" indica que prefieres no precargar el audio. metadata solicita información inicial, como la duración, y auto permite una precarga mayor. Son indicaciones: el navegador puede ajustarlas según la red o sus políticas.
loop repite el audio. Evítalo en entrevistas o explicaciones donde una repetición inesperada pueda confundir. Los atributos booleanos se desactivan retirándolos, no escribiendo loop="false".
Qué formato de audio utilizar
MP3 es una opción habitual para voz y música por su compatibilidad en navegadores comunes. También existen otros contenedores y códecs. Si tu audiencia necesita varias alternativas, incluye más de una fuente:
<audio controls preload="none">
<source src="audio/leccion.mp3" type="audio/mpeg">
<source src="audio/leccion.ogg" type="audio/ogg">
Tu navegador no admite las fuentes de audio.
</audio>Solo añadas formatos que hayas generado de verdad. Cambiar una extensión no convierte el archivo ni resuelve incompatibilidades.
Por qué el audio no se reproduce automáticamente
Los navegadores suelen limitar la reproducción con sonido antes de una interacción del usuario. Añadir autoplay no garantiza que funcione. Para una lección o un podcast, permite que la persona pulse reproducir cuando quiera escuchar.
Un reproductor sin controles y con reproducción automática bloqueada puede parecer que no funciona, aunque el archivo se haya cargado correctamente.
Cómo hacer accesible el contenido sonoro
Incluye una transcripción que reproduzca la información relevante del audio, identifica quién habla cuando sea necesario y ofrece controles que se puedan manejar con teclado. No basta con añadir un título si la explicación completa solo existe en sonido.
Si el archivo es largo, divide la transcripción con encabezados descriptivos. Nuestra guía sobre encabezados HTML te ayuda a organizarla.
Errores frecuentes y cómo comprobarlos
- Abre la URL del MP3 directamente para confirmar que existe.
- Revisa mayúsculas, espacios y nombres de carpetas.
- Comprueba el tipo de contenido que devuelve el servidor.
- Evita archivos excesivamente pesados para una muestra breve.
- Prueba desde un servidor local si el acceso mediante archivos provoca comportamientos distintos.
Preguntas frecuentes
¿Puedo cambiar el color de todos los controles con CSS?
La personalización de los controles nativos es limitada y varía entre navegadores. Un reproductor propio requiere gestionar reproducción, estados y accesibilidad.
¿El archivo se publica solo por escribir la ruta?
No. Debes subirlo a tu servidor y asegurarte de que la dirección sea accesible.
Practica con una grabación breve y su transcripción. Encuentra más ejemplos en los tutoriales de HTML.
Referencia técnica: documentación de audio en MDN.
