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:
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.
2 comentarios, 0 referencias
+
#