TECNato – TIC's Perú

Hacer compatible Audio HTML5 con todos los navegadores

domingo, 18 de marzo del 2012 20 comentarios


Como les prometi, En esta ocación les mostrare como hacer compatible el audio de HTML5 con varios de los Navegadores de Internet.

El post anterior donde mostre como insertar audio con HTML 5:

https://tecnato.com/insertar-audio-con-html5/

Comenzamos:

Vamos a utilizar Javascript, pero para ahorrarnos tiempo y tener mas productividad utilizaremos el plugin audio.js

Descargamos el plugin con todos sus archivos, entonces:

– Primero: Agregamos dentro de nuestras etiquetas <head></head>el archivo audio.min.js que viene dentro del archivo que descargamos

– Segundo: Creamos nuestra funcion con su variable(es obligatoria pero siempre la misma)es sencilla y si no tienes conocimiento de Javascript pues solo copia lo que esta dentro de <head></head>

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

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

</head>

 

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

La Canción es Oasis – Stop Crying Your Heart Out

<audio src=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3″ preload=»auto»></audio>

Listo eso es todo, ahora nuestro audio correra sin ningun problema con otros exploradores.

Aca pueden ver en que navegadores y como trabaja:

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

 

DEMO

Plugin: http://kolber.github.com/audiojs/   <– En su Página Web Hay muchas opciones de este interesante plugin, también encontraran documentación y muchas cosas interesantes !

 NOTA: Recuerden que solo deben usar los archivos de la carpeta  /audiojs que viene dentro del archivo RAR que bajan de la pagina del Plugin.

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

Cheers !


Escrito por para TECNato

20 comentarios

  • mcedwin
    20 de marzo del 2012

    Funciona bien en mi iPad…

  • pepoflex
    20 de marzo del 2012

    Que bueno mcedwin, no tengo uno para probarlo, es un gran aporte lo que dijistes !

  • JEFF
    18 de julio del 2012

    la ubicacion de la cancion … tiene que ser con un URL ?? le doy una simple ruta de archivo y no funciona, y se le puede modificar el tamaño ??

  • Juan Castro Lurita
    6 de agosto del 2012

    hola JEFF,

    – puedes usar URL o en la carpeta que prefieras.
    – editar el tamaño se puede pero pierde calidad tu audio.
    – recuerda no dejar espacios en la direccion de tu archivo si no luego no lo va leer.

    – recuerda que no funciona en versiones antiguas de internet explorer, usa navegadores de preferencia crohme o mozilla.

  • Caronte
    4 de diciembre del 2012

    Hola Juan:
    He hecho una pequeña aplicación con construct2 en html5 que consiste en un xilófono en el que pulsando sobre una placa produce un sonido diferente. En este caso no es necesario que aparezca un reproductor (típico play pausa…)ya que las mismas placas reproducen el sonido, pero los dispositivos android no lo reproducen…¿Cómo se podría utilizar aquí tu tutorial?
    Gracias

  • Juan Castro Lurita
    4 de diciembre del 2012

    que version de android tienen tus dispositivos en donde los has probado y cual es el nombre de la aplicacion en donde probastes?

  • isaac
    16 de agosto del 2013

    Hola amigos necesito ayuda por favor de alguien que comprenda esto:
    En mi web tengo un reproductor de música con la etiqueta audio de html5 la cual controlo con javascript, lo que en javascript controlo es que al terminar de cargase la pagina con onload llama a una función que comprueba con true y false si el navegador admite esta funcionalidad, vale, después de eso aparece el reproductor. Este reproductor tiene que reproducirse automáticamente al cargar la pagina, esto lo hace perfecto en todos los navegador…menos en crome para móvil y tablet. El navegador que viene por defecto en los móviles android si lo reproduce en algunas versiones. He hecho miles de pruebas e intentar que se reproduzca en estos, pero sin lógralo todavía, no sé que puede estar pasando, no lo comprendo. Incluso le he puesto en la propia etiqueta audio autoplay y nada en tabley y móvil sigue igual. Aquí os pongo el código para que comprendáis mejor lo que quiero decirlos:
    Código html

    Play
    Stop

    Código javascript
    // JavaScript Document
    function soporteaudio() {//comprueba compatibilidad elemento audiohtml5 en navegadores
    return !!document.createElement(‘audio’).canPlayType;
    }
    function soporteaudio2 () {
    /*aqui en if se llama a la funcion soporteaudio() y se comprueba que retorno con (return) la funcion soporteaudio(). Devuelve true o false*/
    if (soporteaudio()) {//se vera etiqueta audio html5 fusica fondo
    document.getElementById(‘musicafondohtml5′).style.display = «block»;
    document.getElementById(‘audiohtml5′).play();
    }
    else {//se vera musica fondo flash
    document.getElementById(‘musicaflash’).style.display = «block»;

    }
    }
    //principio llamadas botones reproductor html5
    function reproductor(boton) {
    if (boton == ‘play’) {
    document.getElementById(‘audiohtml5′).play();

    }
    else {
    if (boton == ‘stop’)
    document.getElementById(‘audiohtml5′).pause();
    }
    }
    //final llamadas botones reproductor html5

  • isaac
    17 de agosto del 2013

    codigo html arriba se copio mal:

    Play
    Stop

  • isaac
    17 de agosto del 2013

    bueno por alguna razon no me deja copiar el codigo html aqui, de toas formas en el codigo de la etiqueta audio de html5 normal

  • Elizabeth
    20 de septiembre del 2013

    Buenos días,

    Hace días implementé en mi web este reproductor de audio

    http://kolber.github.io/audiojs/

    comprobando que funcionaba correctamente en las diferentes versiones de IE a partir de la 7.

    Hoy he visto que los audios no me cargaban en IE10 ni IE9, pero si en versiones menores. Pero en estas versiones, si le doy a reproducir da un error de javascript no específico. Pensé que pudiera deberse a algún error en mi código o algún estilo de mi página pero para cerciorarme volví a comprobar vuestro reproductor y este tampoco funciona.

    Alguna idea?

    Saludos

  • Juan Castro Lurita
    20 de septiembre del 2013

    Hola elizabeth, no he tenido la oportunidad de probarlo aun en IE 9 e IE 10, si no te podria ayudar sinceramente, sin embargo en los issues puedes encontrar info otalves buscando en el buscador de google.

    Issues audio,js github:
    https://github.com/kolber/audiojs/issues

    saludos

  • Jhonatan
    25 de abril del 2014

    Hola, tengo puesto un sonido mp3 en mi web con la etiqueta audio y funciona en Chrome pero en Safari no. He probado como explicas en este tutorial y no funciona :S

  • Andrés
    19 de agosto del 2014

    Lo siento tio, a mi no me funcionó. Lo necesitaba para que sonará un sonido en mi móvil al hacer click en una imagen.

    Llamaba a un cambio de la imagen cambiando las css del div.
    Llamaba al audio creando un HTML con innerHTML.
    Volvemos a la imagen original con setTimeout.

    function pide(){
    susette.style.background= ‘url(«img/frame2.png») no-repeat center’;
    susette.innerHTML = «»;
    setTimeout(function pidenovio(){
    susette.style.background= ‘url(«img/frame1.png») no-repeat center’; }, 1000);}

    Me funciona perfectamente en el ordenador pero en el móvil no se oye nada.
    He cumplido tus pasos como una religiosa y no me funcionó.

  • Juan Castro Lurita
    20 de agosto del 2014

    Hola Andres, prueba con los siguientes Navegadores en tu movil: Crohme, Maxthon, Mozilla.
    Descargatelos desde tu app store, prueba haber como te va me dices.
    SAludos

  • Jorge Nunes
    25 de febrero del 2016

    Me Parece genial tu idea, estoy buscando algo similar, pero trate de usarlo para mi web, donde quiero transmitir en aac una radio web, y no logro hacer compatible ningun reproductor… necesito una solucion ya sea por codigo o con algun servicio free de rts, que tampoco consigo, que haga que sea compatible para celulares, tanto android como blackberrys y iphone.. si tienes algo de informacion… te lo agradezco hermano…

  • Juan Castro Lurita
    26 de febrero del 2016

    No te compliques usa un servicio que te incorpora eso y mucho mas por un pago minimo mensual.
    http://mixlr.com/
    Saludos y gracias por visitar el blog amigo

  • Daniel
    1 de marzo del 2016

    Como. Estan. Srs. Tecnato. Estoy proximo. A dar. De alta a una. Pagina web donde quiero incrustar un. Reproductor. De. Mi. Radio. Streaming que. Tengo. En. Listen2myradio se. Puede la. Pagima esta en. Wordpres y cuando. La. Pruebo. En mi. Celular no. Aparece el reproductor

  • Juan Castro Lurita
    2 de marzo del 2016

    Muchos tiene ese problema, en moviles. Eso es algo ya mas profesional y toma tener un buen servidor y configuraciones avanzadas.
    No te compliques usa un servicio que te incorpora eso y mucho mas por un pago minimo mensual.
    http://mixlr.com/
    Saludos y gracias por visitar el blog amigo

  • Jaime Ayala
    30 de marzo del 2018

    Grandioso, funciona perfecto, estuve por mucho tiempo buscando algo así y por fin lo encontre, ahora solo quisiera preguntar habrá algo similar para video?, gracias por tan gran aportación, saludos.

  • Juan Castro Lurita
    2 de abril del 2018

    Si hay varias opciones, una de ellas es Video JS.
    https://videojs.com

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).

Hazte miembro

TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
CMS:
WordPress