Uso de la etiqueta audio en HTML5

Me estoy planteando hacer una sección html5 porque empieza a tener bastante peso en este blog. En cualquier caso, si antes hablé de vídeo ahora toca hablar de audio. De hecho el uso de audio es más sencillo que el de vídeo, tiene menos opciones.

Como ya sabes, la idea de la etiqueta audio es poder insertar archivos de audio directamente en una página web, sin necesidad de un reproductor en flash o de QuickTime. La sintaxis básica sería la siguiente:

<audio width="250" height="32" src="cancionEjemplo.mp3" controls="controls" autoplay="autoplay" preload=""/></audio>

Bueno, width y height son para definir el tamaño del reproductor, no son obligatorios y realmente lo mejor sería no tocarlos si no es necesario para adaptarlos a la maquetación de tu página. El resto los relato a continuación:

  • src: La propiedad src habitual, que enlaza con la dirección del contenido que queremos mostar, en este caso el archivo de audio.
  • controls: Nos permite implementar los controles básicos del reproductor: volumen, play/pause, seek.
  • autoplay: Nos deja especificar si queremos que el archivo de audio comience a reproducirse desde el momento en que se carga la página
  • preload: Permite que especifiquemos si queremos que el archivo comience a cargarse en el buffer antes de comenzar la reproducción, para que no se trabe durante la reproducción por intentar reproducir más de lo que ha cargado.

Como con las etiquetas de vídeo, el problema vendrá por la compatibilidad de los distintos formatos con los navegadores. No todos soportan todo, así que tendrás que romperte un poco la cabeza. En esta lista puedes ver qué formatos soporta cada navegador:

  • Google Chrome: Soporta tanto mp3, como wav y ogg.
  • Safari: A pesar de usar el mismo motor de renderizado que Chrome (el motor Webkit) no soporta el formato ogg, aunque sí mp3 y wav
  • Mozilla Firefox: Soporta ogg y wav, pero no mp3.
  • Opera: Igual que Mozilla, sólo ogg y wav.
  • Internet Explorer: IE9 soporta mp3 y wav, como Safari. De versiones anteriores del navegador de Microsoft ya no me preguntes.

Ok, all right, yeah man! Ahora te estás preguntando «¿y cómo me aseguro de que mi archivo se reproduzca en todos los navegadores?», o si leiste la entra de este mismo blog sobre la etiqueta vídeo ya no te lo preguntas, porque el método es igual. Hay que meter etiquetas source con los distintos archivos dentro de una etiqueta audio, tal que así:

<audio controls autoplay>
    <source src="prueba.ogg" type="audio/ogg" />
    <source src="prueba.wav" type="audio/wav" />
    <source src="prueba.mp3" type="audio/mp3" />
</audio>

Como te imaginas en la etiqueta source la propiedad src es lo mismo que en la etiqueta audio, y type nos permite definir el tipo de archivo que será.

En fin, como diría el guiñol de Michael Robinson «todo pescao vendido, hasta aquí todo por hoy» (léase con acento galés). Espero que os sirva de ayuda.

Anuncio publicitario

3 comentarios en “Uso de la etiqueta audio en HTML5

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.