Emular la etiqueta HTML5 Audio para todos los navegadores

Ciertas etiquetas nuevas que llegaron con HTML5 hicieron furor entre los desarrolladores, una de ellas es sin duda <audio>. La nueva etiqueta nos permite reproducir archivos de audio sin demasiadas complicaciones, apenas unas lineas de código y tendremos listo un buen reproductor directamente desde HTML5.

¿El problema? Como se estarán imaginando, los navegadores antiguos que nunca van a detectar correctamente esta fantástica y nueva etiqueta. Para solucionar este problema, y poder utilizar audio sin problemas, podemos utilizar Audio.js, una pequeña biblioteca JavaScript que nos brinda total compatibilidad con los navegadores más antiguos.

Audio.js emula perfectamente a la etiqueta audio en los navegadores más antiguos, utilizando para ello distintos elementos como por ejemplo un reproductor flash, esto lo hace solo en las versiones de navegadores que no detectan automáticamente esta etiqueta, de esta forma garantizamos una correcta reproducción para todos los visitantes que no tiene sus navegadores actualizados.

emular audio html en todos los navegadores

Emular etiqueta <audio> HTML5

1. Subir a nuestro servidor y en la misma carpeta los archivos audio.js, player-graphics.gif y audiojs.swf.

2. Insertamos en nuestro documento la ruta a la biblioteca:

<script src="/audiojs/audio.min.js"></script>

3. Inicializamos el plugin

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

4. Insertamos la etiqueta donde queremos insertar el reproductor

<audio src="/mp3/juicy.mp3" preload="auto" />

Web: Audio.js

from Kabytes http://www.kabytes.com/programacion/emular-la-etiqueta-html5-audio-para-todos-los-navegadores/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: