aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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:

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