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 !
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Nick el 20 de Marzo de 2012
Por antonio el 14 de Mayo de 2012
antonio-blog :
Link:
http://kolber.github.com/audiojs/
Por Alex el 22 de Mayo de 2012
Alex-blog :
Cheak el demo oficial -> http://kolber.github.com/audiojs/
Perdoname es que estoy cambiando de proovedor de hosting, apenas este listo pongo mi demo de nuevo .
http://www.jrcl.16mb.com/tutoriales/Tag_audio_HTML5_a_todos_los_navegadores/index.php
enjoy !
Por gustavo1976 el 04 de Marzo de 2013
Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Fecha: Mon, 4 Mar 2013 10:33:41 UTC
A mi me da el siguiente error, a alguien mas????
Mensaje: Unknown runtime error
Línea: 10
Carácter: 446
Código: 0
URI: http://politecnicavila.usal.es/jscripts/audio.min.js
Por gustavo1976 el 04 de Marzo de 2013
gustavo1976 :
Hola Gustavo, vuelve hacer todo de nuevo, capas se te ha pasado algo, mi demo corre en todos los navegadores.
Dime si te sale algun error, al probar la demo mia: http://www.jrcl.16mb.com/tutoriales/Tag_audio_HTML5_a_todos_los_navegadores/index.php
si ves la pagina del plugin soporta:
Browser & format support
With Flash as a fallback, it should work pretty much anywhere.
It has been verified to work across:
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)
intenta todo de nuevo, algo te has olvidado, si no citame una captura de pantalla(jpg) para ver tu error y poder ayudarte.
Saludos.
Por gustavo1976 el 19 de Marzo de 2013
Por Antonio el 25 de Abril de 2013
El "Content-Type" HTTP de "audio/mpeg" no es compatible. Ha fallado la carga del recurso de medios http://a.tumblr.com/tumblr_m34326d9CH1rr4wlyo1.mp3
Y cuando pincho en el play me da el siguiente:
uncaught exception: Error in Actionscript. Use a try/catch block to find error.
He estado mirando y no se a que es debido.
Si pueden ayudarme, les estaria agradecido.
Un saludo.
Por DanielPro el 28 de Abril de 2013
Antonio-blog :
El "Content-Type" HTTP de "audio/mpeg" no es compatible. Ha fallado la carga del recurso de medios http://a.tumblr.com/tumblr_m34326d9CH1rr4wlyo1.mp3
Y cuando pincho en el play me da el siguiente:
uncaught exception: Error in Actionscript. Use a try/catch block to find error.
He estado mirando y no se a que es debido.
Si pueden ayudarme, les estaria agradecido.
Un saludo.
intenta, actualizar tus navegadores a las ultimas versiones.
DanielPro-blog :
no entiendo, quieres cambiar el boton play por uno tuyo mas personalizado ?
Por DanielPro el 03 de Mayo de 2013
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, audiojs3 ...... 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:
<style>
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; }
</style>
Espero le sirva a alguien como a mi me sirvio encontrar esta util libreria.
http://jrcl.net76.net/dm/Tag_audio_HTML5_a_todos_los_navegadores/index.php
Por JONATHAN el 03 de Octubre de 2014
Tu explicación es muy buena, por favor ayudame con el siguiente problema: estoy colocando un tag de audio para reproducir un shoutcast de listen2myradio y funciona perfectamente en casi todos los navegadores excepto en ie11 que me da un mensaje de origen no valido! incluso funciona en ie9.
prueba los links de estos demos en tu dispositivo movil y veras que funcionan:
html5rocks.com/en/tutorials/webaudio/intro/
Por Liliana el 03 de Julio de 2015
Liliana-blog :
Te recomiendo usar Mixlr.
http://mixlr.com/
Te dan la opcion de emitir videos para moviles, tablets, desktop, etc.
Tambien te dan un código embed para insertarlo en tu pagina web y asi hacer streaming para moviles.
Te resuelve todo los problemas y con una cuenta gratuita es muy bueno.
Es una opcion rapida que te podria sacar de apuros, si tuviera tiempo me podria a investigar mas , si es posible.
Saludos
Liliana-blog :
Te dejo dos links para que investiges:
- http://donwebayuda.com/como-incluir-en-mi-sitio-web-el-reproductor-que-me-brinda-donweb-para-mi-radio/
- http://www.forosdelweb.com/f4/streaming-radio-con-html5-para-moviles-1073761/
Si no deseas codear mucho, usa la pagina que te pase es muy buena, yo y mis amigos emitimos musica brit pop de ves en cuando y nos va bien. Te lo recomiendo.
Saludos