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);
}*
