Insertar música en el blog con la etiqueta </audio>

Hace poco vimos la forma de insertar vídeos gracias a la etiqueta </video> de HTML5, en esta oportunidad veremos la etiqueta </audio>, la cual nos permite insertar música en el blog de manera fácil y efectiva.

Al igual que la etiqueta anterior el procedimiento es muy sencillo y los parámetros son muy similares. Pero para ampliar la compatibilidad es necesario insertar 2 pistas: Una en formato .mp3 (Para Internet Explorer) y otra en .ogg (Para los demás navegadores ya que Firefox no reproduce .mp3 con esta etiqueta).

El resultado es el siguiente:




Para usar 2 pistas, es necesario crear dentro de la etiqueta </audio> 2 etiquetas </source>, en las cuales especificaremos la dirección de ambos archivos de audio:

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

Es importante saber que la primera pista tiene que ser la en formato .mp3, ya que Internet Explorer detecta el orden, si no la especificas no se reproducirá en dicho navegador.

Al igual que la etiqueta </video> puedes usar varias de los atributos, por ejemplo:

• autoplay: Define si quieres que se reproduzca automáticamente el audio, tienes que establecerlo en autoplay (autoplay="autoplay").
• loop: Permite que la canción se reproduzca nuevamente al finalizar, establecer en loop (loop="loop").
• preload: Con esto hacemos que el audio precargue sin necesidad de intervención, establecer en auto, metadata o none.

Los valores mute y poster no están incluídos ya que no tienen sentido en el reproductor de audio.

Recuerda que si no tienes un convertidor a mano puedes usar media.io, un servicio online de conversión de archivos de audio gratuito.