Tips HTML5 – Etiqueta audio

Esta es al igual que la etiqueta video, una de las mejoras mas esperadas, debido en parte que no había un consenso en cuanto a la forma de reproducir los archivos de audio.

Con la introducción de soporte de audio en HTML5 las cosas se han hecho mas fáciles. En la actualidad se soportan los siguientes formatos de audio:

• Mp3 – Archivos MPEG-2, la especificación no define el codec a usar, así que dependerá del instalado en la maquina.
• Ogg – Archivos Ogg usando el códec de Vorbis para el audio.
• Wav – Archivos de formato de audio Wave usando el códec instalado en la maquina.

Su uso es relativamente simple, veamos un ejemplo:

<audio>

    <source src="audio.mp3" type="audio/mpeg">

    <source src="audio.ogg" type="audio/ogg">

    <source src="audio.wav" type="audio/wav">

    Su navegador no soporta HTML5

</audio>

Como pueden ver, permite incluir varios formatos como tipos alternativos en caso de que el navegador del usuario no admita alguno de ellos. Es importante definir el tipo del video en el atributo type, con la finalidad de que el navegador identifique correctamente el archivo multimedia y use el codec adecuado para su reproducción.

Se han definido algunos atributos nuevos que se pueden utilizar en la etiqueta de vídeo que también son comunes a la etiqueta de audio, como el atributo loop que indica reproducción continua y atributo autoplay que define la reproducción automática.

El atributo controls se utiliza para indicar que queremos que el navegador muestre los controles automáticamente.

El atributo preload se puede utilizar para descargar el audio en segundo plano en cuanto se carga la página aunque no haya empezado a reproducirse, lo que permite que el usuario no experimente tiempos de espera cuando decide reproducir el audio.

El atributo muted, permite que la salida de audio se silencie, sin detener su reproducción.

<audio controls="controls" preload="auto">

     ....

</audio>

De igual forma, esta etiqueta tiene métodos, propiedades y eventos DOM asociados, los cuales permiten una interacción avanzada con JavaScript, lo que permitiría implementar cosas muy interesantes con este control.