26jul/101

HTML5: Audio

HTML5
A partir de Firefox 3.5, Chrome 3, Opera 10.5 y Safari 4, podemos tomar ventaja de las nuevas características de HTML5, incluyendo el soporte para audio sin la necesidad de Flash. Vas a ver que con solo crear un elemento <audio> y setear un par de atributos, vas a poder reproducir sonidos sin ningún otro complemento.

El elemento audio

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
</audio>

El elemento <audio> acepta muchos atributos, veamoslos:

autoplay: Reproduce el archivo de inmediato cuando la página carga.
controls: Muestro el reproductor en la página.
preload: Inmediatamente empieza a cargar el archivo. (valores: none, auto, metadata).
src: El lugar donde se encuentra el archivo. Es preferible cargar el archivo mediante el subelemento <source> en cambio de <audio>

Mozilla (Firefox) y Webkit (Chrome, Safari) no planean llevarse bien todavía, cuando se trata de formator de audio. Firefox va a querer ver un archivo de tipo .ogg, mientras que los navegadores Webkit van a trabajar muy bien con la conocida extensión .mp3. Esto significa que, al menos por ahora, tendrás que crear dos versiones del audio. Te recomiendo que uses una simple y rápida herramienta online, llamada Media.io para convertir tus .mp3 a formato .ogg .

Cuando Safari cargue la página, no reconocerá el formato .ogg, y se irá a la versión .mp3 por ende. Notan que Internet Explorer, y qué raro, no soporta esto, y de Opera 10 para abajo sólo funcionan con archivos .wav .