Saltar al contenido principal

Ejercicio práctico 13: Integrar audio en HTML

Descubre cómo insertar archivos de sonido en tus páginas web utilizando la etiqueta <audio>. Este ejercicio práctico te enseña a reproducir audio en HTML con controles personalizados y compatibilidad moderna.

Actividad​

Inserta un archivo de audio usando la etiqueta <audio>. Dentro de una carpeta debes tener tu archivo HTML y tu archivo de audio, el cual puede estar en una subcarpeta. Usa preferentemente el formato mp3 ya que es más liviano y con buena calidad.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Audio Integrado</title>
  </head>
  <body>
    <h1>Audio</h1>
    <audio controls>
      <source src="audio/mi_audio.mp3" type="audio/mpeg" />
      Tu navegador no soporta la reproducción de audio.
    </audio>
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Múltiples fuentes para máxima compatibilidad​

Cada navegador soporta distintos formatos de audio. Para asegurar que tu audio se reproduzca en todos los navegadores, proporcioná varios formatos con <source>.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Audio Multi-Formato</title>
  </head>
  <body>
    <h1>Podcast</h1>

    <audio controls preload="metadata">
      <!-- El navegador elige el primer formato que soporte -->
      <source src="audio/podcast.mp3" type="audio/mpeg" />
      <source src="audio/podcast.ogg" type="audio/ogg" />
      <source src="audio/podcast.wav" type="audio/wav" />

      <!-- Fallback si ningún formato funciona -->
      <p>
        Tu navegador no soporta audio HTML5.
        <a href="audio/podcast.mp3">Descargar episodio</a>
      </p>
    </audio>
  </body>
</html>

El navegador prueba cada <source> en orden y usa el primer formato que reconoce. MP3 es el más universal, seguido de OGG (open-source) y WAV (sin comprimir, archivos muy grandes).

Variante 2: Audio de fondo ambiental​

Ideal para música de fondo en sitios web, presentaciones o experiencias inmersivas. El audio se reproduce automáticamente, en bucle y sin controles visibles.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Audio de Fondo</title>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        padding: 60px 20px;
      }
      .toggle-btn {
        padding: 12px 28px;
        font-size: 16px;
        background: #333;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 20px;
      }
      .toggle-btn:hover {
        background: #555;
      }
    </style>
  </head>
  <body>
    <h1>Ambiente Sonoro</h1>
    <p>Este sitio tiene música de fondo para mejorar la experiencia.</p>

    <!-- autoplay: reproduce al cargar | loop: repite infinitamente | muted: requerido para autoplay -->
    <audio id="audio-fondo" autoplay loop muted>
      <source src="audio/ambiente.mp3" type="audio/mpeg" />
    </audio>

    <button class="toggle-btn" onclick="document.getElementById('audio-fondo').muted = !document.getElementById('audio-fondo').muted;">
      🔇 Activar / Silenciar Música
    </button>
  </body>
</html>

Claves para audio de fondo:

  • autoplay solo funciona con muted en navegadores modernos
  • loop reinicia el audio automáticamente al terminar
  • Sin controls, el usuario no ve el reproductor (ideal para ambientación)
  • El botón con JavaScript permite al usuario controlar el sonido

Variante 3: Podcast con controles avanzados​

Cuando publicás episodios de podcast o audio educativo, podés usar atributos adicionales para una mejor experiencia.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Podcast</title>
  </head>
  <body>
    <h1>Episodio 42: Introducción a HTML5</h1>
    <p>Duración: 45 minutos | Publicado: 10 de junio 2026</p>

    <audio
      controls
      controlsList="nodownload noplaybackrate"
      preload="metadata"
    >
      <source src="audio/episodio-42.mp3" type="audio/mpeg" />
      <source src="audio/episodio-42.ogg" type="audio/ogg" />
    </audio>

    <p>
      <a href="audio/episodio-42.mp3" download="episodio-42-divzone.mp3">
        ⬇ Descargar episodio (MP3, 42 MB)
      </a>
    </p>
  </body>
</html>

Atributos avanzados:

  • controlsList="nodownload" — oculta el botón de descarga del reproductor nativo
  • controlsList="noplaybackrate" — oculta el control de velocidad
  • preload="metadata" — solo carga la duración e información, ahorrando datos

Variante 4: Audio desde URL externa (CDN)​

Si almacenás tus archivos de audio en un CDN o servidor externo, usá la URL completa como src. Esto es común en sitios que usan servicios como Amazon S3, Cloudinary o SoundCloud.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Audio desde CDN</title>
  </head>
  <body>
    <h1>Audio Externo</h1>

    <!-- Usando una URL absoluta al archivo de audio -->
    <audio controls>
      <source
        src="https://cdn.ejemplo.com/audio/podcast-semanal.mp3"
        type="audio/mpeg"
      />
      Tu navegador no soporta la reproducción de audio.
    </audio>

    <p>Este audio se carga desde un servidor externo (CDN).</p>
  </body>
</html>

Usar un CDN para archivos de audio mejora la velocidad de carga al distribuir el contenido globalmente. Asegurate de que el servidor externo tenga configurados los headers CORS (Access-Control-Allow-Origin) o el audio podría no cargarse.

Buenas y Malas Prácticas​

✅ Buena práctica❌ Mala práctica
Usar preload="metadata" para ahorrar ancho de bandaUsar preload="auto" si el audio pesa más de 10 MB
Ofrecer MP3 + OGG para compatibilidad cruzadaUsar solo formato WAV (archivos enormes, 10x más pesados)
Incluir un enlace de descarga como fallbackConfiar en que todos los navegadores soportan <audio>
Agregar muted cuando usás autoplayForzar autoplay sin muted (no funciona en navegadores)
Usar controlsList para limitar descargas si es necesarioNo informar la duración y tamaño del archivo al usuario

Preguntas Frecuentes (FAQ)​

¿Qué formato de audio es mejor: MP3, OGG o WAV?​

MP3 es el formato más compatible universalmente. OGG (Vorbis) es open-source y libre de patentes, soportado por todos los navegadores excepto Safari en algunas versiones antiguas. WAV no tiene compresión, por lo que los archivos pesan hasta 10 veces más — solo usalo si necesitás calidad de estudio sin pérdida.

¿Por qué mi audio no se reproduce en Safari?​

Safari tiene restricciones estrictas con autoplay y a veces no soporta OGG. Para máxima compatibilidad: 1) poné MP3 como primer <source>, 2) no uses autoplay sin muted, 3) asegurate de que el servidor acepte solicitudes de rango (HTTP 206 Partial Content) para streaming.

¿Se puede proteger el audio para que no lo descarguen?​

No completamente. El atributo controlsList="nodownload" oculta el botón de descarga en Chrome, pero un usuario técnico siempre puede acceder a la URL del archivo desde el código fuente o las herramientas de desarrollo. Para protección real necesitás soluciones del lado del servidor como tokens temporales o streaming encriptado (HLS/DASH).

¿El audio en HTML afecta el SEO?​

El audio en sí no afecta directamente al SEO, pero Google puede indexar contenido de audio si está acompañado de transcripciones de texto. Para mejorar la accesibilidad y el SEO, siempre incluí un resumen o transcripción del contenido del audio en la misma página.

tip

🎵 ¿Querés saber más sobre etiquetas multimedia? Explorá Elementos y etiquetas en HTML para conocer todas las opciones de audio, video e iframe que tenés disponibles.