Hacer compatible Audio HTML5 con todos los navegadores


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 !

Autor: Juan Castro Lurita

Engineer especialista en Web development, también especializado en multimedia, gráfica e impresiones, Blender 3D, Autocad 3D, etc. Actualmente vivo en Lima - Perú. Amo la informática y la Web. Twitter: @pepoflex

20 opiniones en “Hacer compatible Audio HTML5 con todos los navegadores”

  1. 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 ??

  2. 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.

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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ó.

  9. 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…

  10. 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

  11. 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

  12. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *