Contenido

Soporte de audio en HTML5 para los diferentes navegadores

31 jul

+ 2

La guerra de los estándares múltimedia nos va a dar más de un dolor de cabeza, y es que como no se acaba de poner de acuerdo cada navegador está haciendo la guerra por su parte y se implementan codecs para unos y no para otros de ahí que no todos los navegadores permitan reproducir una tipos de audio y otros si.

En html5Doctor hacen una tabla, muy útil, de los navegadores y los estándares soportados por cada uno de ellos:

audiosupport
(Ver Imagen)

Como podemos ver, excepto Opera 10 (beta) todos los demás navegadores están ofreciendo 2 alternativas en las que podemos ver como se van posicionando cada navegador.

Si miramos por estándar usado (para seleccionar el más adoptado) nos encontramos que ambos están soportados en almenos 3 navegadores, así que más o menos estamos en el mismo punto que antes de empezar a leer el artículo.

source

Una posibilidad para solventar el problema podría ser usar el tag <source /> para definir una serie de alternativas y el navegador usará una u otra.

<audio controls autobuffer>
 <source src="elvis.ogg" />
 <source src="elvis.mp3" />
 <!-- insertamos alternativa en Flash -->
</audio>

canPlayType

Una de las propiedades del elemento <audio /> (que yo no conocía) es canPlayType, un método que nos devolverá no/maybe/probably (WTF!) dependiendo de la disponibilidad de un tipo determinado. Para ello, en html5doctor, nos proponen un pequeño JS.

if (myAudio.canPlayType) {
 canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
 canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}

Podemos usar este código para añadir un método a los elementos HTMLAudioElement que nos permita pasar 3 parámetros y dependiendo de la disponibilidad de uno u otro use el apropiado.

if (typeof HTMLAudioElement != 'undefined') {
 HTMLAudioElement.prototype.playSong = function(ogg, mp3, wav) {
 if (!myAudio.canPlayType) return false;
 if ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"))
 this.src = ogg;
 else if ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"))
 this.src = mp3;
 else
 this.src = wav;
 }
}
// Ejemplo
document.getElementsByTagName("audio")[0].playSong("http://.../nombre.ogg", "http://.../nombre.mp3", "http://.../nombre.wav");

Es un ejemplo, habría que filtrar los parámetros y poco más, pero es funcional.

  • Ya se está volviendo a hacer lo mismo que cuando empezó Internet Explorer, que es inventar cosas y que cada navegador las interprete a su manera.

    Creo que, antes de aprobar un estándar, se deberían poner de acuerdo los principales desarrolladores para llevar a cabo todas las posibilidades que ofrecen, al 100%, porque ahora volvemos a lo mismo: los de siempre tirándose de los pelos para imponerse unos a otros y, para variar, los desarrolladores web quedamos en medio, y tenemos que recurrir a chapuzas extraoficiales para poder agarrarnos al estándar.

    ¿Cuándo llegará el día en que se pueda desarrollar una web bajo un estándar, de forma tranquila y sin preocuparse de si un navegador se comportará de una manera u otra? ¿Éste es el futuro de Internec?

  • Gracias por la info, espero que el estandar sea para todos los navegadores y no que halla volver ah estar fijandose que tipo de navegador se usa

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.