Docs ejecutables de HTML: Etiqueta audio

Q: ¿Cómo pongo audio en una página HTML?

Usa . El atributo controls muestra el reproductor del navegador con un botón de reproducir, una línea de tiempo y el volumen. Sin él, el elemento es invisible.

Q: ¿Cómo repito un audio en bucle en HTML?

Añade el atributo loop: . Cuando el archivo termina, vuelve a empezar desde el principio.

Q: ¿Cómo reproduzco un sonido con JavaScript?

Crea o selecciona un elemento de audio y llama a play(), por ejemplo new Audio('click.mp3').play() dentro de un manejador de clic. play() devuelve una promesa que se rechaza si el navegador bloquea la reproducción.

Cómo poner audio

Apunta el elemento <audio> a un archivo de sonido y añade controls:

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

controls muestra el reproductor del navegador: reproducir y pausar, una línea de tiempo, el tiempo y un control de volumen. Sin controls, el elemento no ocupa ningún espacio. La vista previa no puede cargar archivos de tu ordenador, así que este ejemplo crea un archivo WAV corto en el navegador con un script y lo usa como src. Pulsa reproducir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

El reproductor se ve distinto en Chrome, Firefox y Safari, porque cada navegador dibuja el suyo. Borra controls y el reproductor desaparece, aunque el audio sigue ahí para que JavaScript lo reproduzca.

Atributos de audio

Atributo	Qué hace
`controls`	Muestra el reproductor del navegador
`autoplay`	Intenta empezar a reproducirse al cargar (bloqueado con sonido, ver más abajo)
`loop`	Vuelve a empezar cuando termina el archivo
`muted`	Empieza con el volumen desactivado
`preload`	`none` (no descarga nada hasta reproducir), `metadata` (solo la duración) o `auto` (decide el navegador)
`src`	El archivo que se reproduce; o usa hijos `<source>` para varios formatos

Usa preload="none" o "metadata" en páginas con muchos reproductores, como una lista de episodios de un pódcast, para que la página no descargue todos los archivos de entrada.

Formatos y alternativas

Lista varios archivos con <source> y el navegador reproduce el primero que admita. El texto dentro del elemento solo aparece en los navegadores sin soporte de <audio>:

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Formato	Tipo MIME	Notas
MP3	`audio/mpeg`	Se reproduce en todos los navegadores actuales; la opción segura si solo tienes uno
AAC (`.m4a`)	`audio/mp4`	Soporte amplio, buena calidad con archivos pequeños
Opus o Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Archivos pequeños; lista un MP3 como alternativa, porque el soporte de Safari varía según la versión
WAV	`audio/wav`	Sin comprimir y pesado; vale para efectos de sonido cortos

Por qué falla el autoplay

Los navegadores no dejan que una página empiece a sonar por su cuenta. autoplay, o llamar a play() antes de que el usuario haya hecho clic o tocado la pantalla, se rechaza. Este ejemplo intenta reproducir al cargar e imprime lo que pasó, y luego ofrece un botón:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Normalmente verás NotAllowedError, el error que da un navegador cuando bloquea la reproducción. El botón funciona porque un clic cuenta como permiso. Cada navegador tiene sus propias reglas extra (Chrome, por ejemplo, recuerda los sitios en los que sueles reproducir contenido), así que nunca confíes en el autoplay: inicia el sonido desde una acción del usuario y gestiona siempre la promesa que devuelve play().

new Audio(url) crea un elemento de audio en JavaScript sin añadirlo a la página, lo que resulta práctico para efectos de sonido.

Crea tus propios controles

Oculta el reproductor integrado omitiendo controls, y maneja el elemento con su API de JavaScript: play(), pause(), currentTime, duration, volume y eventos como timeupdate y ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

El botón es un <button> real, así que funciona con el teclado, y su etiqueta cambia entre Play y Pause. Al final del archivo, el navegador pausa el elemento y dispara ended, así que el botón vuelve solo a Play. Si creas controles propios, también asumes lo que los integrados te daban sin hacer nada: soporte de teclado, etiquetas y un control de volumen.

Accesibilidad

Nunca empieces a sonar solo. Interrumpe a los lectores de pantalla y asusta a la gente. Inicia el audio desde un clic.
Ofrece una transcripción para pódcasts y audio hablado. Basta con un enlace a una versión en texto bajo el reproductor, y los buscadores pueden leerla.
Mantén controls, o crea controles con botones reales, para que el audio se pueda pausar con el teclado.

Para vídeo con sonido, subtítulos y pósteres, consulta la página de la etiqueta video; <audio> comparte la mayoría de sus atributos y toda su API de JavaScript.

Errores comunes

Olvidar controls. El elemento es invisible sin él, y parece que no ha pasado nada.
Esperar que autoplay funcione. Inicia la reproducción desde un clic y gestiona la promesa de play().
Una ruta o un tipo de archivo equivocados. Abre la URL del archivo directamente para comprobarla, y haz que type coincida con el formato real (audio/mpeg para MP3).
Cargar todos los archivos de una lista larga. Usa preload="none" o "metadata".
Música de fondo que no se puede parar. Da siempre a la gente una forma visible de pausar.

Preguntas frecuentes

¿Cómo pongo audio en una página HTML?

Usa <audio src="song.mp3" controls></audio>. El atributo controls muestra el reproductor del navegador con un botón de reproducir, una línea de tiempo y el volumen. Sin él, el elemento es invisible.

¿Por qué mi audio no se reproduce automáticamente?

Los navegadores bloquean el audio que empieza con sonido antes de que el usuario haya interactuado con la página. Inicia la reproducción desde un clic con audio.play(). Un elemento silenciado sí puede reproducirse solo, pero en el caso del audio rara vez sirve de algo.

¿Qué formato de audio debo usar en HTML?

MP3 se reproduce en todos los navegadores actuales, así que es la opción segura para un solo archivo. AAC en un archivo .m4a también tiene un soporte amplio. Usa elementos <source> para ofrecer más de un formato.

¿Cómo repito un audio en bucle en HTML?

Añade el atributo loop: <audio src="rain.mp3" controls loop>. Cuando el archivo termina, vuelve a empezar desde el principio.

¿Cómo reproduzco un sonido con JavaScript?

Crea o selecciona un elemento de audio y llama a play(), por ejemplo new Audio('click.mp3').play() dentro de un manejador de clic. play() devuelve una promesa que se rechaza si el navegador bloquea la reproducción.

¿Puedo dar estilo al reproductor de audio de HTML?

Solo un poco: puedes fijar su ancho, su margen y su display, pero los botones de dentro los dibuja el navegador y se ven distintos en cada uno. Para un aspecto propio, oculta los controles y crea los tuyos con botones y la API de audio de JavaScript.

Conceptos relacionados