martes, 18 de octubre de 2011

Reproductor de audio HTML 5 + Javascript


Quiero beber hasta perder el control de Fito & Fitipaldis

Dando vueltas a las posibles soluciones que podemos encontrar para que nuestro audio se oiga en todos los navegadores, de todos los sistemas operativos, de todos los equipos, sean estos fijos o móviles, me encuentro con esta solución.
Se llama audio.js.
Se trata de la unión de código HTML 5 para la reproducción del audio con código javascript que tenemos que instalar en la cabecera de la página web o en la plantilla del blog.

Además, necesitamos un servidor que nos permita alojar en una misma carpeta los tres archivos necesarios para que el reproductor funcione.
A saber:
1.- El archivo audio.min.js
2.- El archivo audiojs.swf
3.- El archivo player-graphics.gif
El primero es el javascript propiamente dicho, el segundo es el reproductor flash para los navegadores que no soportan HTML 5, el tercero son imágenes animadas utilizadas en la carga y reproducción.
Estos tres archivos los puedes obtener desde la descarga de la carpeta comprimida que se encuentra en la página oficial del programa.
También te lo puedes descargar desde aquí (botón derecho del ratón > Guardar archivo como).
Al descomprimirlo verás en la carpeta audiojs los tres archivos que hemos mencionado anteriormente. Estos y sólo estos son los que tienes que cargar en la carpeta de tu servidor.
Una vez alojados esos tres archivos en tu servidor, en la plantilla del blog, en la cabecera, es decir, entre las etiquetas <head> y </head> coloca este fragmento de código:
<script src="http://....audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
Sustituyendo la cadena http://...audio.min.js por la dirección URL de tu archivo.

Luego, en la entrada del blog, tenemos que colocar la ruta del archivo mp3. Con esta solución no podemos colocar archivos ogg o wav. Sólo mp3.
El código deberá ser:
<audio src="http://...archivo.mp3" preload="auto" />
Sustituyendo la cadena http://...archivo.mp3 por la dirección real del archivo de audio.
Y ya estárá.

Gracias a mi compañero José Miguel (@uaipse) por la idea.
A Google porque lo encuentra todo.
A esta página porque fue la primera que encontró.
Y a esta otra una vez más...
Related Posts Plugin for WordPress, Blogger...