lunes, 10 de enero de 2011

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 JavaScript 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.


audiojs-logo




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. Es decir, usa el reproductor javascript 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).


Os paso también un enlace a un artículo de Vagabundia, en él tenéis más información:


Tutorial para colocar audio.js (especialmente para el caso de blogs de Blogger): audio.js: MP3s y HTML5 en todos los navegadores : Vagabundia

Web original del programa (en inglés pero sencilla, se entiende bastante bien): 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.

Artículos relacionados:

5 comentarios:

adolfo dijo...

Para la creación de una lista de reproducción con ese código?.
Gracias.

Santi Folch dijo...

Hola Adolfo, como ya habrás visto en la web de audio.js, existe la posibilidad de crear listas de reproducción, pero no se aporta ninguna explicación sobre la forma de hacerlo :(

De esa forma no puedo ayudarte demasiado. Lo único que puede hacerse es mirar el código de la web en la que ponen el ejemplo, y cambiar las URL por las de tus propios archivos. Las opciones que permitan las listas las desconozco.

SubiOnBass dijo...

Hola!
Alguien ha conseguido hacer una lista de reproducción?

Rafaela dijo...

¡Muchas gracias por la información! Me será de gran utilidad.

Diseñador dijo...

Es justo la información que andaba buscando, gracias por el aporte. Un saludo.