Reproductor de música/audio en el blog de una manera sencilla y rápida

Si te sientes con la tentación de poner un poco de ritmo en tu sitio, me refiero a agregar música de fondo, con opción a que el usuario le de "el cortón si le molesta", o bien, que éste lo reproduzca, tienes que saber que ésto es posible de una manera rápida, sencilla, y lo más sorprendente sin usar ningún script o depender del flash, si usas una etiqueta llamada audio.

¿Qué es la etiqueta audio?

La etiqueta audio es una etiqueta nueva en HTML5, que sirve para reproducir un archivo de audio por ejemplo, en formatos Ogg o MP3.



Los navegadores modernos ya aceptan esta etiqueta, incluyendo Internet Explorer 9, aunque cada navegador muestra de distinta forma el reproductor, es decir, como luce éste, así como la calidad en que se reproduce.



En las siguientes imágenes puedes ver como luce el reproductor en Firefox y Google Chrome:

...y si quieres verlo en acción, puedes probarlo desde la w3schools o ahora mismo...









Afortunadamente en las plantillas del Diseñador de Plantilla puedes usar dicha etiqueta sin muchos problemas, ya que estas están especificadas como HTML5. En las plantillas de Diseño o anteriores, también funcionará, sólo que la etiqueta será inválida y se mostrará como indefinida si por ejemplo fueras a verificar en un validador, por lo que lo tu decides si lo pones o no.



En la siguiente tabla,  puedes ver la compatibilidad de los navegadores con los distintos formatos

	Ogg	MP3	Wav
Firefox 3.6+	✓		✓
Safari 5+		✓	✓
Chrome 6	✓	✓
Opera 10.5+	✓		✓
Internet Explorer 9		✓	✓

En Internet Explorer 9, aunque ya soporte esta etiqueta, no funcionará en las nuevas plantillas (del diseñador de plantillas), ya que estas tienen un código especial para forzar la compatibilidad con Internet Explorer 7:



<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>



...y si lo quitamos puede haber problemas con la plantilla, así que por el momento, mejor nos olvidamos de ese navegador.



Ok, suena interesante, pero ya me enredaste con tanto rollo,  y yo solo quiero poner el reproductor... estarás pensando...Ok, mejor, vayamos al grano:

¿Cómo poner música de fondo en el blog usando la etiqueta audio?

1. Primero necesitas tener listo el archivo del audio que vas a poner, en formato Ogg y MP3, pensando en que funcione con todos los navegadores. Si ya cuentas con el archivo en formato MP3, sólo necesitarás convertir ese formato en uno Ogg, y lo puedes hacer, usando este conversor de audio.

2. Luego, deberás alojar los dos archivos en algún servicio que ofrezca los enlaces directos, como Kiwi6, u otro, para luego obtener sus enlaces.

3. Hecho lo anterior, deberás incluir los dos enlaces dentro del siguiente código que permitirá que sea compatible en los distintos navegadores, y personalizar el mensaje que aparecerá cuando el navegador del usuario no soporte la etiqueta, y que está de verde:

<audio loop="loop" autoplay="autoplay" controls="controls">

  <source src="archivo.ogg" type="audio/ogg" />

  <source src="archivo.mp3" type="audio/mp3" />

  Lo siento tu navegador no soporta el elemento audio.

</audio>

En el código anterior:

• Con autoplay="autoplay", especificas si el audio se reproducirá una vez que esté listo, es decir se reproduce automáticamente al cargarse.


• Con loop="loop", se especifica que el audio se va a reproducir de nuevo cada vez que se terminé, es decir, se reproducira indefinidamente una y otra vez.


• Con controls="controls", se especifica que los controles de play/pausa etc, se van a mostrar.

4. finalmente pones el código en cualquier sección de tu blog, eligiendo la opción de HTML/JavaScript, guarda los cambios y a disfrutar de la música!.



Impresionante ¿verdad?, es increíble que usando una simple etiqueta sea posible reproducir un audio en la web,  sin depender del flash, y que aparezca el reproductor con controles y toda la cosa ¿qué tal?, entonces, ¿te animas a probarlo?.





Referencias y lecturas recomendadas

La etiqueta <audio>

Uso básico de la etiqueta audio en HTML5