Etiqueta <audio>

Con el lanzamiento de HTML5, el manejo de contenido multimedia en la web dio un salto enorme. Antes dependíamos de plugins como Flash, que eran poco seguros y complicados. Hoy podemos integrar contenido multimedia de forma nativa compatible con casi todos los navegadores.

Etiqueta HTML <audio>

En HTML5 es posible incorporar archivos de audio de manera sencilla, ya sea para reproducir música, podcasts, efectos de sonido o incluso añadir una pista de ambientación sonora a una página web.

Ejemplo básico:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta la etiqueta audio.
</audio>

Resultado:

Atributos

Los atributos de la etiqueta <audio> se pueden agrupar según su propósito: hay atributos que controlan la interfaz y comportamiento del reproductor (por ejemplo, mostrar controles o repetir el sonido) y otros que afectan cómo se carga.

Atributos de fuente y carga

Atributo	Descripción
src	Ruta del archivo de audio.
type	(en <source>): Especifica el tipo MIME del audio.

Atributos de control

Atributo	Descripción
controls	Muestra los controles nativos del reproductor (reproducir, pausar, volumen).
controlsList	Permite indicar qué controles mostrar u ocultar (como nodownload).
autoplay	Comienza a reproducir el audio automáticamente al cargar la página.
loop	Hace que el audio se repita en bucle.
muted	Inicia el audio silenciado.
preload	Indica cómo debe cargarse el audio (auto, metadata o none).

Ejemplo:

<audio controls autoplay loop muted preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Audios con fallbacks

Cuando usas la etiqueta <audio> como contenedor, puedes incluir varias fuentes alternativas dentro de ella para asegurar mayor compatibilidad entre navegadores. Las etiquetas que podemos indicar en el interior son las siguientes:

Etiqueta	Descripción
<source>	Establece un archivo de audio principal o alternativo.
<track>	Establece un archivo de subtítulo principal o alternativo

Cada navegador soporta distintos formatos de audio, por lo que al listar varios archivos con <source> el navegador intentará reproducir el primero que sea compatible y, si ninguno lo es, mostrará el contenido de fallback que coloques al final.

Ejemplo de <audio> con fallbacks:

<audio controls preload="auto">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <!-- Fallback para navegadores muy antiguos -->
  <p>
    Tu navegador no soporta la reproducción de audio. 
    Puedes <a href="audio.mp3">descargar el archivo</a> para escucharlo.
  </p>
</audio>

1. El navegador intenta reproducir primero audio.ogg, luego audio.mp3.
2. Si ninguno de los formatos es compatible, se muestra el texto de fallback.
3. El contenido de fallback puede incluir enlaces o mensajes que ayuden al usuario.

Ejemplo de uso con JavaScript

Veamos un ejemplo un poco más avanzado, el cual combina la carga del archivo en HTML y el control mediante JavaScript:

<!-- Definimos el sonido sin el atributo controls para que no se muestre -->
<audio id="tecla-sound" src="key.ogg" preload="auto"></audio>
<div class="keyboard" align="center">
  <kbd data-key="q">Q</kbd>
  <kbd data-key="w">W</kbd>
  <kbd data-key="e">E</kbd>
  <kbd data-key="r">R</kbd>
  <kbd data-key="t">T</kbd>
  <kbd data-key="y">Y</kbd>
</div>
<script>
  document.addEventListener("keydown", (e) => {
    const audio = document.getElementById("tecla-sound");
    const key = e.key.toLowerCase();
    const keyElement = document.querySelector(`kbd[data-key="${key}`);
    if (keyElement) {
        audio.currentTime = 0; // reinicia el audio para que suene cada vez
        audio.play();
    }
  });
</script>

En este caso, el archivo de sonido se declara en el HTML con la etiqueta <audio>, y el control de reproducción se maneja desde JavaScript mediante el evento keydown.

Presiona una de las siguientes teclas para escuchar el sonido:

Q W E R T Y