Un reproductor de audio que une HTML5 y JavaScript

Este reproductor puede ser muy útil para aquellos webmaster que quieran poner música (o cualquier archivo de audio) en sus webs o blogs. Es bueno, ligero y sencillo de implementar, y otra ventaja que tiene radica en que une la etiqueta <audio> de HTML5 con el viejo HTML de toda la vida. O, dicho más sencillamente, funcionará en todos los navegadores. En resumen, un reproductor de audio para páginas web muy recomendable, de funcionamiento comprobado durante años.

Un poco de "info" previa para los no especialistas en diseño web: HTML5 es la última versión de HTML, que entre otras cosas hace mucho hincapié en el terreno multimedia; se crearon para ello nuevas etiquetas como <VIDEO> y <AUDIO>, que antes no existían, y que permiten reproducir directamente archivos multimedia sin que haga falta nada más. Sencillamente pondremos la etiqueta y el navegador reproducirá el archivo de sonido o vídeo, sin necesidad de ningún plug in o complemento.

Y aquí radica la ventaja de este reproductor del que os hablo. La herramienta, llamada audio.js, está hecha con Javascript y por ello es compatible con todos los navegadores. Lo nuevo es que su autor ha tenido la buena idea de que use la etiqueta <audio> para funcionar, con lo que cuando HTML5 esté plenamente implementado el código seguirá siendo válido. Concretamente, usa un reproductor de Flash allí donde aún no funciona HTML5.

Eso sí, hay que tener en cuenta que sólo podremos usar archivos MP3 (tampoco es mucho problema pues es el formato más extendido y práctico, aunque habrá que ver que pasa en el futuro, pues supuestamente HTML5 usará el formato .OGG).

Colocar el reproductor audio.js en una web.

La forma de implementar el reproductor es sencilla. Hay que descargar los archivos desde la web del autor (que luego os pondré), y subirlos al hosting donde tengamos nuestra web, poniéndolos todos en una misma carpeta. Si en vez de en una web queremos usarlo en un blog, y éste es gratuito (con lo que no disponemos de espacio propio), podemos usar un hosting público. Aunque es obligado decir que esto cada vez es más difícil, sobre todo desde que Dropbox eliminó su carpeta Public (los enlaces públicos que han puesto para sustituirla no funcionan para alojar scripts, lo he comprobado).

Viene todo bien explicado en la web de los creadores del reproductor. Básicamente, consiste como digo en poner los 3 archivos en la misma carpeta, y luego introducir el código de los scripts en la página:

<script src='---CAMBIAR POR NUESTRA URL---'></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>

Luego, en el sitio de la página donde queramos que vaya el reproductor, pondremos esto otro, y listo:

<audio preload="auto" src="---CAMBIAR POR NUESTRA URL---"></audio>

Hay que poner la URL donde hayamos puesto el archivo MP3 con nuestra canción o audio (recomendable que esté todo en el mismo sitio).

Web original del programa (en inglés pero sencilla, se entiende bastante bien, ahí se explica todo y se pueden descargar los archivos): AUDIO.JS - Web oficial

Por último, comentar que si tenéis alguna duda o dificultad podéis comentármela, igual puedo echaros una mano. Por cierto, la canción que he usado como ejemplo -y que podéis escuchar si pulsáis el botón de play- pertenece a Josh Woodward. Está bajo una licencia Creative Commons, si os gusta podéis descargarla gratuita y libremente en el enlace anterior, junto a muchos temas más. Y con mayor calidad, pues yo le he bajado mucho el tamaño al archivo MP3 para manejarlo mejor.