Comunidad de diseño web y desarrollo en internet

Audio en HTML5 cross-browser con audio.js

En esta ocasión les mostraré cómo hacer compatible el audio de HTML5 con varios navegadores utilizando el plugin audio.js

Descargamos el plugin con todos sus archivos, agregamos dentro de nuestras etiquetas <head></head> el archivo audio.min.js que viene dentro del archivo que descargamos y creamos nuestra función con su variable (es obligatoria pero siempre la misma). Es sencilla y si no tienes conocimiento de Javascript pues sólo copia lo que está dentro de <head></head>.

Código :

<head>
<script src=”js_t_otros/audio.min.js”></script>

<script>
audiojs.events.ready(function(){
var as = audiojs.createAll();
});
</script>

</head>


Ya tenemos configurado todo para que corra nuestro audio, entonces insertamos dentro de <body></body> el audio que queremos reproducir.

Esta es una versión rare de la Canción de Listen – Collective Soul

Código :

<audio src=”http://cjlight.powweb.com/tmp/Collective%20Soul%20-%20Listen%20(Remix).mp3″ preload=”auto”></audio>


Listo eso es todo, ahora nuestro audio correrá sin ningún problema en varios exploradores. Acá el listado:


  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)



Ver Demo

Plugin audio.js en github: aquí hay muchas opciones de este interesante plugin, también encontrarán documentación y muchas cosas interesantes !

Recuerden que sólo deben usar los archivos de la carpeta /audiojs que viene dentro del archivo RAR que bajan de la página del Plugin.


Espero les haya gustado, y ojala que así sea, para seguir subiendo mas tutos =)

Cheers !

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate