A partir de Firefox 3.5, Chrome 3, Opera 10.5 y Safari 4, podemos aprovechar muchas de las nuevas características de HTML 5, incluida la compatibilidad con audio nativo sin necesidad de Flash. Como verás, solo creamos la nueva.
El elemento de audio
El elemento de audio acepta un puñado de atributos, sobre todo:
auto-reproducción : Reproduce inmediatamente el archivo cuando se carga la página..
controles: Muestra el jugador en la página..
precarga Inmediatamente comienza el almacenamiento en búfer del archivo. (valores = ninguno, auto, metadatos)
src: La ruta al nombre del archivo. Es una mejor práctica cargar el archivo a través del elemento "fuente" hijo en su lugar.
Mozilla y Webkit todavía no se llevan bien, en lo que respecta al formato de audio. Firefox querrá ver un archivo .ogg, mientras que los navegadores Webkit funcionarán bien con la extensión .mp3 común. Esto significa que, al menos por ahora, debe crear dos versiones del audio. Le recomiendo que use una herramienta en línea rápida y simple, llamada Media.io, para convertir su mp3 al formato ogg.
Cuando Safari carga la página, no reconocerá ese formato .ogg, y la omitirá y pasará a la versión mp3, según corresponda. Tenga en cuenta que IE, como es habitual, no admite esto, y Opera 10 y versiones inferiores solo pueden trabajar con archivos .wav.
Cargando audio con jQuery
// Modificado ligeramente de la versión de video. $ (document) .ready (function () // Crea un elemento de audio, configúralo para que se reproduzca automáticamente, // y muestre el reproductor cuando se cargue la página. var audio = $ ('', reproducción automática:' reproducción automática ', controles:' controles '); // Llame a nuestra función addSource, y pase el elemento de audio // y las rutas a su audio. addSource (audio, 'audioFile.ogg'); addSource (audio, 'audioFile.mp3'); // Cuando se activa algún evento ... $ ('a'). Haga clic en (función () // Agregue los elementos de audio + fuente a la página. Audio.appendTo ('cuerpo'); // Desaparece la etiqueta de ancla para mantenerla el usuario no haga clic en él otra vez. $ (this) .fadeOut ('slow'); return false;); // Agrega un elemento de origen y lo agrega al elemento de audio, representado // por elem. función addSource (elem, ruta) $ ('') .attr (' src ', path) .appendTo (elem); );
Tenga en cuenta que podemos ir mucho más allá con esto, incluido cómo detener el audio, cambiar el volumen, etc. Este rápido consejo de tres minutos es solo para abrir el apetito. Si desea profundizar, háganoslo saber y programaremos un tutorial completo de treinta minutos sobre el tema.!
Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..
Share
Accentsconagua
