Entendiendo el tag audio de HTML 5

Introducido en HTML, el tag <audio> cumple la función de definir un sonido y se utiliza mayormente para insertar contenido sonoro como música o podcasts en documentos HTML. Actualmente es soportado por todos los navegadores modernos. No pasa así con Internet Explorer 8 y sus versiones anteriores.

El tag <audio> puede utilizarse para reproducir archivos de audio en los siguientes formatos:

  • mp3: Soportado por todos los navegadores modernos
  • wav: No soportado por Internet Explorer
  • ogg: No soportado ni por Internet Explorer ni por Safari

Cómo utilizar el tag <audio> para insertar un fichero de audio en tu sitio web

Este es sin duda el uso más básico del tag <audio>. En este ejemplo lo primero que tenemos que hacer es subir el fichero mp3 que quieres reproducir al directorio que desees de tu servidor.

Date cuenta de que utilizamos el atributo autoplay para que el fichero se reproduzca automáticamente. Dicho esto, se debe evitar reproducir sonidos automáticamente en una página web, ya que es extremadamente molesto para los visitantes, ya que no tendrán forma de detener la reproducción del audio.

<audio src="sound.mp3" autoplay></audio>

Reproducir en bucle un archivo de sonido

Si quieres reproducir un archivo de sonido una y otra y otra vez, puedes agregar el atributo loop en tu elemento audio:

<audio src="sound.mp3" autoplay loop></audio>

Mostrar los controles del navegador

En lugar de que se reproduzca automáticamente, puedes hacer que el navegador muestre unos controles para que el usuario pueda gestionar la reproducción del sonido. Hablamos de controles como el volumen, play/pausa, etc...

Esto se puede hacer de forma sencilla simplemente añadiendo el atributo controls al tag:

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

Múltiples formatos de fichero

El tag <audio> te permite definir diferentes formatos para un mismo archivo de sonido. Esto es especialmente útil si quieres reproducir un fichero en formato .ogg, el cual como hemos visto antes no es soportado ni por Internet Explorer, ni por Safari.

<audio controls>
  <source src="sound.ogg">
  <source src="sound.mp3">
</audio>

Definir MIME Types

Cuando utilizamos diferentes formatos de audio, es muy buena idea especificar el MIME type de cada fichero para ayudar al navegador a localizar el fichero que soporta. Esto se puede hacer facilmente utilizando el atributo type en el elemento source.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

¿Qué hacemos con los navegadores antiguos?

Todos los navegadores modernos soportan el tag <audio>. Sin embargo, es posible avisar a los usuarios que utilizan navegadores antiguos que el tag <audio> no es compatible con su navegador.

Como puedes ver a continuación, solo tienes que insertar el mensaje que quieras dentro de la etiqueta <audio>. Si el navegador del usuario no admite dicho tag, se mostrará el mensaje en lugar del reproductor de audio.

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Tu navegador no soporta el tag audio
</audio>

Precargar ficheros

Cuando reproducimos archivos grandes, lo ideal es almacenar esos archivos en el búfer para que el usuario no tenga que esperar y esperar para reproducir dicho audio y lo escuche fluidamente.

¿Cómo hacer esto? Pues con el atributo preload. Este atributo acepta 3 valores: none (si no deseas que el archivo se guarde en el búfer), auto (si deseas que el navegador almacene el archivo en el búfer) y metadata (para almacenar solo los metadatos cuando se carga la página).

<audio controls>
  <source src="sound.mp3" preload="auto" >
</audio>

Controlar el reproductor con Javascript

Controlar la reproducción del audio con Javascript es muy sencillo. En el siguiente ejemplo muestro cómo construir un rudimentario reproductor de audio con controles basiquitos (Play, Pausa, Volumen +, Volumen -) utilizando HTML y Javascript.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pausa</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volumen +</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volumen -</button>
</div> 

Personalizando el tag <audio> con CSS

Actualmente, las opciones que tenemos para personalizar el tag de audio son algo limitadas. Las propiedades de CSS que podemos utilizar son: width, box-shadow, border-radius y transform.

audio { 
  width: 600px; 
  box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4);
  border-radius: 90px;
  transform: scale(1.05);
}

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP