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.



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

Ver también:   Crear y reducir el tamaño de un PDF con software libre y gratuito

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.

Ver también:   Maquetador-online, presentamos un nuevo proyecto web de esta casa
Índice

Te puede interesar...

  1. Unknown dice:

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

  2. Admin Com.Multimed. dice:

    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.

  3. SubiOnBass dice:

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

  4. Rafaela dice:

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

  5. Diseñador dice:

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

Subir