Introducción al elemento audio de HTML5

Hoy voy a hacer una pequeña introducción al elemento audio de HTML5 que como ya todos sabéis, forma parte de la nueva especificación de HTML5 y nos permite empotrar archivos de audio en nuestros proyectos web sin necesidad de utilizar plugins adicionales como Flash.

El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los formatos que soportan los diferentes navegadores no son parte del estándar sino que depende de la implementación de cada fabricante. Puedes guiarte con esta tabla para comprobar que formatos soportan los navegadores más usados de forma nativa:

Tanto en Safari como en Chrome, algunos formatos dependen de Quicktime y ffmpeg respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan solo Vorbis y MP3, por el contrario, si compilamos Chromium con soporte para ffmpeg si estarán disponibles todos esos formatos de forma nativa a través de ffmpeg, de ahí la cursiva.

Creo que no me he dejado nada en el tintero, de todos modos si alguien conoce algún dato sobre la tabla que yo desconozca o haya omitido o esté erróneo agradecería feedback con link al respecto para corregirla. Como puede apreciarse, combinando Vorbis y MP3 podremos ofrecer audio a todos los navegadores mayoritarios.

¿Cómo funciona?

Empotrar un archivo de audio en HTML5 es muy simple:

<audio src="archivo.mp3">
</audio>

Como ocurre con todas las etiquetas de HTML5 lo que se encuentre entre las etiquetas audio solo será tenido en cuenta por navegadores que no soportan la nueva etiqueta. Obviamente, el ejemplo anterior es extremadamente simple, la etiqueta audio nos ofrece muchas más posibilidades. Por ejemplo, podemos arruinar completamente nuestras páginas empotrando un archivo de audio que se auto reproduzca por si mismo siendo odiados al instante por cada uno de los usuarios que entren a nuestro sitio:

<audio src="archivo.mp3" autoplay>
</audio>

El atributo autoplay es un atributo booleano y por lo tanto no necesita de un valor, sin embargo si quieres escribir tu código al estilo XHTML puedes usar autoplay="true". Si la gente que visita tu sitio web aún no ha decidido cortarse las venas por el autoplay siempre puedes hacerlo mucho más divertido utilizando ademas el atributo loop para que se reproduzca en bucle:

<audio src="archivo.mp3" autoplay loop>
</audio>

Controles

Si no queremos provocar un suicidio masivo en la red con nuestros bucles de audio auto reproducidos sin posibilidad de pausa, siempre podemos ofrecerle al usuario que navega por nuestro sitio web de unos controles básicos para el elemento audio:

<audio src="archivo.mp3" controls>
</audio>

El atributo controls hace que el navegador nos provea de una interfaz con controles para la reproducción y el control del volumen de forma nativa. Los controles del navegador pueden ser suplantados por nuestros propios controles usando JavaScript a través de una API que nos proporciona métodos para controlar todos los aspectos de la reproducción del archivo de audio:

<audio id="player" src="archivo.mp3">
</audio>
<div>
    <button onclick="document.getElementById('player').play();">Reproducir</button>
    <button onclick="document.getElementById('player').pause();">Pausa</button>
    <button onclick="document.getElementById('player').volume += 0.1;">Subir Volumen</button>
    <button onclick="document.getElementById('player').volume -= 0.1;">Bajar Volumen</button>
</div>

Buffer

Si queremos que nuestro archivo de audio sea precargado en segundo plano por el navegador, podemos usar el atributo preload que puede tomar tres posibles valores: none, auto y metadata. Safari precarga los archivos de audio por defecto, usando preload="none" podremos asegurarnos de que eso no ocurra en aquellos contextos en los que creamos que no es necesario que el navegador precargue los archivos, por ejemplo, cuando existen muchos archivos en una misma página:

<audio src="archivo.mp3" preload="none">
</audio>

Si solo tienes un archivo de audio en tu página, seguramente quieras usar preload="auto"

Especificar más de un formato de archivo a la vez

Nada es perfecto, y claro, la etiqueta audio tampoco se salva de tener sus cosillas en esta ocasión por algo que no es parte de su especificación, el problema de los diferentes formatos soportados por diferentes fabricantes. Aunque el formato MP3 está ampliamente extendido desde hace muchos años, no es un formato abierto y está ligado a patentes. Las tecnologías que decodifican archivos MP3 deben pagar una tasa por la patente.

Eso está muy bien para corporaciones como Apple, Microsoft o Google, pero no lo está para los grupos de código abierto y software libre o las empresas pequeñas. Safari, IE y Chrome puede reproducir archivos MP3 sin problemas, sin embargo ese no es el caso de Firefox y de Opera (aunque Opera puede a través de ffmpeg).

Por suerte, existen otros formatos abiertos como Vorbis que no requieren de patentes para ser utilizados. Firefox, Opera y Chrome lo soportan de forma nativa, IE y Safari no. Además, existe una forma de definir más de un archivo de audio en diferentes formatos utilizando únicamente una etiqueta audio para ello. En lugar de usar el atributo src en la etiqueta de apertura, utilizaremos la etiqueta source para poder definir múltiples archivos:

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

Los navegadores que puedan reproducir archivos Ogg Vorbis no buscarán más allá de la primera etiqueta source mientras que los que no lo soporten, avanzarán hasta la siguiente etiqueta. De esta manera podremos complacer las necesidades de todos los usuarios sin discriminar a ningún navegador. Aunque el atributo type no es obligado, siempre es bueno utilizarlo y ayudar a los navegadores. El elemento source es un elemento standalone así que si estás usando sintaxis XHTML puedes utilizar la etiqueta <source /> tal y como he hecho yo.

¿Y los que usamos IE 8 o inferior?

Dejando a un lado la obviedad de que estáis locos, existe una forma de ofreceros esos archivos de audio utilizando Flash para ello. Como bien he apuntado antes, cualquier cosa que haya entre la apertura y cierre de las etiquetas audio será tenido en cuenta solo por navegadores que no soporten aún la nueva especificación por lo que podemos jugar con esto último para seguir utilizando a nuestro gran amigo Flash para estos menesteres:

<audio controls>
    <source src="archivo.ogg" type="audio/ogg" />
    <source src="archivo.mp3" type="audio/mpeg" />
    <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3">
        <param name="movie" value="player.swf?soundFile=archivo.mp3" />
    </object>
</audio>

Podemos ir incluso más allá y ofrecer un link directo para aquellos navegadores que no soporten ni la nueva especificación ni flash utilizando la etiqueta object:

<pre class="prettyprint lang-html"><code><audio controls>
    <source src="archivo.ogg" type="audio/ogg" />
    <source src="archivo.mp3" type="audio/mpeg" />
    <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3">
        <param name="movie" value="player.swf?soundFile=archivo.mp3" />
        <a href="archivo.mp3">Descarga el archivo de audio</a>
    </object>
</audio>

Así estaremos ofreciendo nuestro contenido a todos los navegadores y dispositivos manteniendo unas buenas prácticas en cuanto a accesibilidad del contenido se refiere.

En Genbeta Dev | Introducción a HTML5