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 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
![Framework JavaScript para crear animaciones con Canvas [HTML5]](https://www.kabytes.com/wp-content/themes/yeager/img/generica-4.jpg)
Lo mejor de mi RSS del 26 de marzo al 1 de abril | Linux Hispano
12 años ago
[…] Todo sobre GNU/LinuxDesterrando los MITOS del Software Libre – Usemos Linux@usemoslinuxEmular la etiqueta HTML5 Audio para todos los navegadores – Kabytes@kabytesCrea tu propio servidor de datos en la nube con OwnCloud – Usemos […]
DanielPro
11 años ago
Necesito darle play con un boton normal ya que el reproductor debes estar oculto ¿Como puedo hacerlo?
DanielPro
11 años ago
Pregunte en otro foro tambien y publique como logre lo que necesitaba en la siguiente respuesta:
En realidad estaba buscando como reproducir pero no mediante el reproductor, la razon es porque estoy haciendo un chat tipo facebook, entonces cuando llegue un mensaje nuevo o cuando alguien se conecte queria que se emitiera un sonido, para lo cual el reproductor debe estar oculto y mediante javascript hacer reproducir el sonido, ya logre hacerlo gracias a DIOS.
Preferi esta libreria ya que la he probado en firefox, ie, opera, safari, en versiones nuevas, antiguas y funciona, hasta por el blackberry me funciono, ademas de que el creador nos dio licencia de hacer con la misma lo que quisieramos.
Con la ayuda de firebug pude saber como lograr lo que necesitaba, paso a compartirlo por si alguien lo necesita:
audiojs.instances.audiojs0.play();
Con esa linea es como darle play al reproductor, Ojo! que audiojs0 vendria a ser el primer reproductor que tengamos en nuestra pagina, si tenemos mas de uno estos se llamarian audiojs0, audiojs1, audiojs2 …… y asi sucesivamente.
Otro dato si alguien lo necesita como yo es que no traten de ocultar el reproductor metiendolo dentro de un div y colocando este div en display = none esto debido a que en opera, safari y firefox me dio problemas ya que mientras estaba oculto no se podia reproducir con la linea de programacion que mencione anteriormente, en su defecto es mejor utilizar css para darle medidas 0px a los elementos del reproductor tanto al height como al width tal como lo hice:
p { clear: both; }
.audiojs { height: 0px; }
.audiojs .play-pause { width: 0px; height: 0px; }
.audiojs p { width: 0px; height: 0px; }
.audiojs .scrubber { width: 0px; height: 0px; }
.audiojs .progress { height: 0px; width: 0px; }
.audiojs .loaded { height: 0px; }
.audiojs .time { height: 0px; }
.audiojs .error-message { height: 0px; }
Espero le sirva a alguien como a mi me sirvio encontrar esta util libreria.
Beto
11 años ago
Esta perfecto, muchas gracias, me ha ayudado extremadamente mucho…..