03 noviembre 2011

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

Hay quienes disfrutan de un poco de música en el blog, hay quienes no.

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 el visitante lo reproduzca a su elección, 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, cómo 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:

reproductores de audio de navegadores


He aquí como se ve actualmente:




Afortunadamente en las plantillas del Diseñador de Plantilla puedes usar dicha etiqueta sin muchos problemas, ya que estas están especificadas como documentos 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 en esa versión, 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. Bueno, pues mejor vayamos al grano:


¿Cómo poner música de fondo 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 controls autoplay loop>
  <source src="archivo.ogg" type="audio/ogg" />
  <source src="archivo.mp3" type="audio/mp3" />
   Lo siento tu navegador no soporta el elemento audio.
</audio>
Y en el código anterior:
  • Con autoplay, el audio se reproducirá una vez que esté listo, es decir se reproduce automáticamente al cargarse.
  • Con loop, se especifica que el audio se va a reproducir de nuevo cada vez que se terminé, es decir, se reproducirá indefinidamente una y otra vez.
  • Con controls, se especifica que se mostrarán los controles de play/pausa.
Si no queremos usar esos atributos, simplemente los quitamos.

4. finalmente pones el código en cualquier sección de tu blog, eligiendo la opción de HTML/JavaScript, guarda los cambios y listo.

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
Usando la etiqueta Audio
Uso básico de la etiqueta audio en HTML5

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.