lunes, 10 de enero de 2011

Un reproductor de audio para páginas web que une HTML5 y JavaScript

Este reproductor que ha aparecido recientemente puede ser muy útil para aquellos webmaster que quieran poner música (o cualquier archivo de audio) en sus webs o blogs. Es sencillo de implementar, pero su ventaja radica en que une la etiqueta <audio> de los nuevos códigos HTML5 con el viejo JavaScript de toda la vida. O, dicho más sencillamente, funcionará en todos los navegadores.


audiojs-logo


 

 

Un poco de "info" previa para los no especialistas en diseño web: HTML5 es la última versión de HTML, recientemente aparecida, que entre otras cosas hace mucho hincapié en el terreno multimedia; se han creado para ello nuevas etiquetas como <VIDEO> y <AUDIO>, que antes no existían, y que permitirán 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.

 

Pero claro, esto será en el futuro, cuando los navegadores (Internet Explorer, Firefox, etc...) implementen esta tecnología. Como os imaginaréis, ahora mismo no lo hacen. Y aquí radica la ventaja de este reproductor del que os hablo (y de cuya existencia me acabo de enterar, gracias al genial JMiur de vagabundia.blogspot.com).

 

Este reproductor, llamado audio.js, está hecho en 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. No me extenderé sobre esto porque JMiur ya lo ha hecho en su artículo. Os lo paso, en él tenéis toda la información que os puede hacer falta:

 

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.