HTML - Elemento de audio

Sintaxis Básica

La etiqueta HTML <audio> se usa para agregar contenido de audio a una página web. Es una forma sencilla de añadir archivos de audio a tu sitio web. La etiqueta <audio> necesita un atributo src que apunte al archivo de audio que deseas reproducir. Los formatos de audio compatibles incluyen MP3, WAV y OGG.

<audio src="ruta/al/archivo/audio.mp3"></audio>

El atributo src le indica al navegador dónde encontrar el archivo de audio. Puedes usar una ruta relativa si el archivo de audio está alojado en el mismo servidor que la página web, o una URL absoluta si el archivo de audio está alojado en un servidor diferente.

También puedes usar el atributo type para indicarle al navegador el tipo MIME del archivo de audio. Esto ayuda al navegador a saber si puede reproducir el archivo de audio antes de descargarlo.

<audio src="ruta/al/archivo/audio.mp3" type="audio/mpeg"></audio>

No todos los navegadores son compatibles con los mismos formatos de audio. Para asegurarte de que tu audio funcione en la mayor cantidad de dispositivos posible, puedes proporcionar múltiples fuentes de audio usando la etiqueta <source> dentro del elemento <audio>.

<audio>
  <source src="ruta/al/archivo/audio.mp3" type="audio/mpeg">
  <source src="ruta/al/archivo/audio.ogg" type="audio/ogg">
  Tu navegador no soporta el elemento de audio.
</audio>

En este ejemplo, el navegador intentará reproducir la primera fuente (MP3) y si no es compatible, intentará con la siguiente fuente (OGG). Si ninguno de los formatos de audio funciona, el navegador mostrará el texto "Tu navegador no soporta el elemento de audio."

El contenido de respaldo es importante para los navegadores antiguos que no soportan la etiqueta <audio>. Al proporcionar contenido alternativo, puedes asegurarte de que todos los usuarios puedan acceder a la información en tu página web, incluso si no pueden escuchar el audio.

Atributos

La etiqueta HTML <audio> tiene varios atributos que puedes usar para controlar cómo se reproduce y se muestra el audio en tu página web.

El atributo controls se usa para mostrar los controles de audio, como los botones de reproducción, pausa y volumen. Sin este atributo, el reproductor de audio no tendrá ningún control y no podrás iniciar o detener el audio.

<audio src="path/to/audio/file.mp3" controls></audio>

El atributo autoplay hace que el audio comience a reproducirse tan pronto como se carga la página web. Esto puede ser molesto para ti, por lo que es mejor usar este atributo con cuidado.

<audio src="path/to/audio/file.mp3" autoplay></audio>

El atributo loop hace que el audio se repita continuamente hasta que lo detengas. Esto es útil para música de fondo o efectos de sonido.

<audio src="path/to/audio/file.mp3" loop></audio>

El atributo muted establece el estado inicial de silencio del reproductor de audio. Esto significa que el audio estará silenciado por defecto cuando se cargue la página web.

<audio src="path/to/audio/file.mp3" muted></audio>

El atributo preload controla cómo debe cargar el navegador el archivo de audio. Puede tener uno de tres valores:

<audio src="path/to/audio/file.mp3" preload="auto"></audio>

Múltiples fuentes

La etiqueta HTML <audio> te permite especificar múltiples fuentes de audio usando el elemento <source>. Esto ayuda a proporcionar diferentes formatos de audio para asegurar que tu audio funcione en muchos navegadores y dispositivos.

Para usar múltiples fuentes, agrega uno o más elementos <source> dentro de la etiqueta <audio>. Cada elemento <source> debe tener un atributo src que apunte al archivo de audio y un atributo type que especifique el tipo MIME del formato de audio.

<audio>
  <source src="path/to/audio/file.mp3" type="audio/mpeg">
  <source src="path/to/audio/file.ogg" type="audio/ogg">
  <source src="path/to/audio/file.wav" type="audio/wav">
  Tu navegador no soporta el elemento de audio.
</audio>

En este ejemplo, el navegador intentará reproducir la primera fuente (MP3) y si no es compatible, pasará a la siguiente fuente (OGG) y así sucesivamente. Si ninguno de los formatos de audio especificados es compatible, el navegador mostrará el texto de respaldo "Tu navegador no soporta el elemento de audio."

Diferentes navegadores soportan diferentes formatos de audio, por lo que es importante proporcionar múltiples fuentes para cubrir una amplia gama de navegadores y dispositivos. Los formatos de audio más comunes son:

Al especificar múltiples fuentes, ordénalas según tu formato preferido. Los navegadores usarán el primer formato compatible que encuentren, así que lista tu formato preferido primero.

También proporciona contenido de respaldo para navegadores que no soportan la etiqueta <audio> en absoluto. Agrega texto u otros elementos HTML dentro de la etiqueta <audio>, después de los elementos <source>. Este contenido de respaldo solo se mostrará si ninguna de las fuentes de audio especificadas puede reproducirse.

Usar múltiples elementos <source> y proporcionar contenido de respaldo ayuda a asegurar que tu audio funcione en muchos navegadores y dispositivos, ofreciendo una buena experiencia de usuario para todos tus visitantes.

Estilizando con CSS

Puedes cambiar el aspecto del elemento HTML <audio> y sus controles usando CSS. Esto te permite hacer que el reproductor de audio coincida con el estilo de tu página web.

Para estilizar los controles de audio, puedes usar el pseudo-elemento ::-webkit-media-controls. Este pseudo-elemento se dirige a los controles de audio predeterminados mostrados por el navegador.

audio::-webkit-media-controls {
  background-color: #f1f1f1;
  color: #333;
  border-radius: 5px;
  padding: 5px;
}

A los controles de audio se les da un color de fondo gris claro, color de texto gris oscuro, esquinas redondeadas y algo de relleno.

También puedes estilizar partes específicas de los controles de audio, como el botón de reproducción, la barra de progreso y el control deslizante de volumen, usando otros pseudo-elementos como ::-webkit-media-controls-play-button, ::-webkit-media-controls-progress-bar y ::-webkit-media-controls-volume-slider.

Para estilizar el elemento <audio> en sí, puedes usar propiedades CSS como width, height, background, border y margin.

audio {
  width: 300px;
  height: 40px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px auto;
}

Al elemento de audio se le da un ancho y alto fijos, un color de fondo gris claro, un borde, esquinas redondeadas y se centra en la página usando la propiedad margin.

Interacción con JavaScript

El elemento HTML <audio> puede ser controlado usando JavaScript, permitiéndote crear reproductores de audio personalizados y añadir funciones interactivas a tus páginas web.

Para reproducir o pausar un elemento de audio con JavaScript, puedes usar los métodos play() y pause(). Primero, selecciona el elemento de audio usando un método como document.querySelector() y luego llama al método.

<audio id="miAudio" src="ruta/al/archivo/audio.mp3"></audio>

<button onclick="reproducirAudio()">Reproducir</button>
<button onclick="pausarAudio()">Pausar</button>

<script>
  var audio = document.querySelector('#miAudio');

  function reproducirAudio() {
    audio.play();
  }

  function pausarAudio() {
    audio.pause();
  }
</script>

Al hacer clic en el botón "Reproducir" se llamará a la función reproducirAudio(), que selecciona el elemento de audio usando su ID y llama al método play(). De manera similar, al hacer clic en el botón "Pausar" se llamará a la función pausarAudio() para pausar el audio.

También puedes ajustar el volumen y buscar un tiempo específico en el audio usando JavaScript. La propiedad volume controla el volumen del audio, con valores que van de 0 (silenciado) a 1 (volumen máximo). La propiedad currentTime establece o devuelve la posición actual de reproducción en segundos.

<audio id="miAudio" src="ruta/al/archivo/audio.mp3"></audio>

<button onclick="establecerMitadVolumen()">Establecer Mitad de Volumen</button>
<button onclick="buscar30Segundos()">Ir a 30 Segundos</button>

<script>
  var audio = document.querySelector('#miAudio');

  function establecerMitadVolumen() {
    audio.volume = 0.5;
  }

  function buscar30Segundos() {
    audio.currentTime = 30;
  }
</script>

Al hacer clic en el botón "Establecer Mitad de Volumen" se llamará a la función establecerMitadVolumen(), que establece la propiedad volume del elemento de audio en 0.5 (mitad del volumen). Al hacer clic en el botón "Ir a 30 Segundos" se llamará a la función buscar30Segundos(), que establece la propiedad currentTime en 30, saltando a la marca de 30 segundos en el audio.

JavaScript también puede escuchar eventos de audio, como cuando el audio comienza a reproducirse, se pausa o termina. Puedes usar estos eventos para activar funciones o actualizar la interfaz de usuario.

<audio id="miAudio" src="ruta/al/archivo/audio.mp3"></audio>
<button onclick="reproducirAudio()">Reproducir</button>
<p id="estadoAudio"></p>

<script>
  var audio = document.querySelector('#miAudio');
  var estado = document.querySelector('#estadoAudio');

  function reproducirAudio() {
    audio.play();
  }

  audio.onplay = function() {
    estado.textContent = 'El audio está reproduciéndose';
  };

  audio.onpause = function() {
    estado.textContent = 'El audio está pausado';
  };

  audio.onended = function() {
    estado.textContent = 'El audio ha terminado';
  };
</script>

Los escuchadores de eventos onplay, onpause y onended se usan para actualizar el contenido de texto del elemento <p> con el ID "estadoAudio" basado en el estado actual del audio. Cuando el audio comienza a reproducirse, el texto cambiará a "El audio está reproduciéndose". Cuando se pausa, mostrará "El audio está pausado", y cuando el audio termina, mostrará "El audio ha terminado".

Combinando estos métodos y eventos de JavaScript, puedes crear reproductores de audio personalizados con funciones como botones de reproducción/pausa, controles deslizantes de volumen, barras de progreso y más. JavaScript proporciona control sobre el elemento <audio>, permitiéndote crear experiencias de audio atractivas e interactivas en tus páginas web.

Consideraciones de accesibilidad

Al agregar contenido de audio a sus páginas web, es importante pensar en la accesibilidad para todos los usuarios, incluidos aquellos con discapacidades auditivas. Estas son algunas formas de hacer que su contenido de audio sea más accesible:

Proporcionar transcripciones de su contenido de audio es una manera de hacerlo accesible para usuarios sordos o con problemas de audición. Una transcripción es una versión de texto del contenido hablado en su audio. Puede proporcionar una transcripción en la misma página que su reproductor de audio o enlazar a una página separada con la transcripción completa.

<audio src="path/to/audio/file.mp3" controls></audio>

<p>
  <a href="transcript.html">Leer la transcripción</a>
</p>

El uso de atributos ARIA (Aplicaciones de Internet Enriquecidas Accesibles) también puede mejorar la accesibilidad de su reproductor de audio. Los atributos ARIA proporcionan información adicional sobre los elementos de su página a las tecnologías de asistencia como los lectores de pantalla.

<audio id="myAudio" src="path/to/audio/file.mp3" controls>
  <p>Su navegador no soporta el elemento de audio.</p>
</audio>

<button onclick="playAudio()" aria-controls="myAudio">
  Reproducir audio
</button>

El atributo aria-controls se agrega al botón de reproducción, indicando que controla el elemento de audio con el ID "myAudio". Esto ayuda a los lectores de pantalla a entender la relación entre el botón y el reproductor de audio.

Aquí hay algunas mejores prácticas para crear reproductores de audio accesibles:

<div class="audio-player">
  <audio id="myAudio" src="path/to/audio/file.mp3">
    <p>Su navegador no soporta el elemento de audio.</p>
  </audio>

  <div class="controls">
    <button id="playPause" onclick="togglePlayPause()" aria-controls="myAudio">
      Reproducir/Pausar
    </button>
    <input id="volumeSlider" type="range" min="0" max="1" step="0.1" value="1" onchange="adjustVolume()" aria-controls="myAudio">
  </div>

  <div class="transcript">
    <a href="transcript.html">Leer la transcripción</a>
  </div>
</div>

Este ejemplo muestra un reproductor de audio con características accesibles:

• El elemento <audio> tiene un mensaje de respaldo para navegadores que no lo soportan.
• El botón de reproducir/pausar y el control deslizante de volumen tienen etiquetas claras y atributos aria-controls para vincularlos al elemento de audio.
• El control deslizante de volumen se puede ajustar usando las teclas de flecha del teclado.
• Se proporciona un enlace a la transcripción debajo del reproductor de audio.

Compatibilidad con navegadores y alternativas

El elemento HTML <audio> es compatible con la mayoría de los navegadores web modernos, incluyendo Chrome, Firefox, Safari y Edge. Sin embargo, los navegadores más antiguos pueden no ser compatibles con la etiqueta <audio> o tener un soporte limitado para ciertos formatos de audio.

Para comprobar si un navegador es compatible con el elemento <audio>, puedes usar JavaScript para verificar la presencia del objeto HTMLAudioElement:

if (typeof HTMLAudioElement !== 'undefined') {
  // El navegador es compatible con el elemento audio
} else {
  // El navegador no es compatible con el elemento audio
}

Si el navegador no es compatible con el elemento <audio>, puedes proporcionar contenido alternativo dentro de la etiqueta <audio>. Este contenido alternativo solo se mostrará si el navegador no puede reproducir el audio.

<audio src="ruta/al/archivo/audio.mp3" controls>
  <p>Tu navegador no es compatible con el elemento de audio.</p>
  <a href="ruta/al/archivo/audio.mp3">Descarga el archivo de audio</a>
</audio>

Otra alternativa es usar los elementos <object> o <embed> para incorporar un complemento de reproductor de audio, como Flash o QuickTime. Sin embargo, estos complementos son cada vez menos comunes y no son compatibles con dispositivos móviles.

<audio src="ruta/al/archivo/audio.mp3" controls>
  <object type="application/x-shockwave-flash" data="ruta/al/reproductor.swf?audio=ruta/al/archivo/audio.mp3">
    <param name="movie" value="ruta/al/reproductor.swf?audio=ruta/al/archivo/audio.mp3">
    <p>Tu navegador no es compatible con el elemento de audio ni con Flash.</p>
  </object>
</audio>

Para manejar la compatibilidad entre navegadores más fácilmente, puedes usar bibliotecas de audio HTML5 que proporcionan una interfaz de reproductor de audio consistente en diferentes navegadores. Algunas bibliotecas de audio populares incluyen:

Estas bibliotecas abstraen las diferencias entre navegadores y proporcionan una forma unificada de trabajar con audio en tus páginas web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>

<script>
  var sonido = new Howl({
    src: ['ruta/al/archivo/audio.mp3', 'ruta/al/archivo/audio.ogg'],
    html5: true,
    onplay: function() {
      console.log('El audio comenzó a reproducirse');
    },
    onend: function() {
      console.log('El audio terminó de reproducirse');
    }
  });

  sonido.play();
</script>

En este ejemplo, se incluye la biblioteca howler.js en la página y se crea un nuevo objeto Howl con las fuentes de audio y opciones. La opción html5 se establece en true para priorizar la reproducción de audio HTML5. Los callbacks onplay y onend se usan para registrar mensajes cuando el audio comienza y termina de reproducirse. Finalmente, se llama al método play() para comenzar a reproducir el audio.

Ejemplos y casos de uso

El elemento HTML <audio> tiene muchos usos para agregar audio a las páginas web. Aquí hay algunos ejemplos:

<h2>Último episodio del podcast</h2>
<audio controls>
  <source src="ruta/al/episodio/podcast.mp3" type="audio/mpeg">
  <p>Su navegador no admite el elemento de audio.</p>
</audio>
<p>En este episodio, hablamos sobre las últimas tendencias en desarrollo web.</p>

<audio id="musicaDeFondo" loop>
  <source src="ruta/a/musica-de-fondo.mp3" type="audio/mpeg">
  <source src="ruta/a/musica-de-fondo.ogg" type="audio/ogg">
</audio>

<script>
  var musicaDeFondo = document.getElementById('musicaDeFondo');
  musicaDeFondo.volume = 0.5; // Establecer volumen al 50%
  musicaDeFondo.play(); // Comenzar a reproducir la música de fondo
</script>

<div class="reproductor-audio">
  <audio id="miAudio">
    <source src="ruta/al/archivo/audio.mp3" type="audio/mpeg">
    <source src="ruta/al/archivo/audio.ogg" type="audio/ogg">
    <p>Su navegador no admite el elemento de audio.</p>
  </audio>
  <div class="controles">
    <button id="botonReproducirPausar" onclick="alternarReproducirPausar()">Reproducir/Pausar</button>
    <input id="controlVolumen" type="range" min="0" max="1" step="0.1" value="1" onchange="ajustarVolumen()">
    <span id="tiempoActual">0:00</span> / <span id="duracion">0:00</span>
  </div>
</div>

<script>
  var audio = document.getElementById('miAudio');
  var botonReproducirPausar = document.getElementById('botonReproducirPausar');
  var controlVolumen = document.getElementById('controlVolumen');
  var mostrarTiempoActual = document.getElementById('tiempoActual');
  var mostrarDuracion = document.getElementById('duracion');

  function alternarReproducirPausar() {
    if (audio.paused) {
      audio.play();
      botonReproducirPausar.textContent = 'Pausar';
    } else {
      audio.pause();
      botonReproducirPausar.textContent = 'Reproducir';
    }
  }

  function ajustarVolumen() {
    audio.volume = controlVolumen.value;
  }

  audio.addEventListener('timeupdate', function() {
    mostrarTiempoActual.textContent = formatearTiempo(audio.currentTime);
  });

  audio.addEventListener('durationchange', function() {
    mostrarDuracion.textContent = formatearTiempo(audio.duration);
  });

  function formatearTiempo(tiempo) {
    var minutos = Math.floor(tiempo / 60);
    var segundos = Math.floor(tiempo % 60);
    return minutos + ':' + (segundos < 10 ? '0' : '') + segundos;
  }
</script>

En este ejemplo, el reproductor de audio personalizado tiene un botón de reproducir/pausar, un control deslizante de volumen y muestra el tiempo actual y la duración del audio. El código JavaScript maneja la funcionalidad de reproducir/pausar, el ajuste de volumen y actualiza las pantallas de tiempo mientras se reproduce el audio.

Estos son solo algunos ejemplos de cómo puede usar el elemento HTML <audio> para agregar audio a sus páginas web. Ya sea que esté insertando podcasts, agregando música de fondo o creando reproductores de audio personalizados, el elemento <audio> le proporciona una forma simple de trabajar con audio en el desarrollo web.