El tag <audio> Se utiliza mayormente para insertar contenido sonoro como música o podcasts en documentos HTML. Es soportado por todos los navegadores modernos. No así con Internet Explorer 8 y sus versiones anteriores. Para insertar un fichero de audio en tu sitio web. En HTML, 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
Lo primero que debemos hacer es cargar el *.archivo que desea reproducir en el directorio que desea en su servidor.
Se utiliza el atributo autoplay para que el fichero se reproduzca automáticamente. Debe evitar reproducir sonidos automáticamente en una página web, ya que es molesto para los visitantes.
<audio src="sound.mp3" autoplay></audio>
Reproducir en bucle un archivo de sonido
Si quieres reproducir un archivo indefinidamente, 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 volumen, play/pausa, para que el usuario maneje la reproducción... 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);
}*
