En nuestro curso de HTML5 y CSS3 uno de los temas que abordamos es la facilidad de inserción de elementos multimedia. Para los que llevamos muchos años peleándonos con el código en el mundo online nos parece casi ciencia ficción lo fácil que nos lo pone HTML5 en este sentido. En este artículo vamos a ver cómo introducir sonido en HTML5, lo que nos será útil si queremos compartir una canción, una entrevista o un archivo de podcast, por ejemplo.
Por cierto, la etiqueta <audio> y la etiqueta <video> funcionan de una manera muy parecida y ambas comparten muchos atributos, así que lo aquí expuesto también te resultará de utilidad para introducir archivos de video en HTML5.
Al grano, de entrada la etiqueta <audio> parece ser casi perfecta porque de entrada es muy sencilla de utilizar, pero como más adelante veremos, el problema está en los formatos de archivos de audio que soporta cada navegador, sobre todo pensando en navegadores antiguos . Esta sería la etiqueta de audio ideal en el mundo de los unicornios y del arco iris:
<audio src="mi-archivo-de-audio.mp3"></audio>
A partir de aquí podemos añadirle diferentes atributos a la etiqueta.
Atributos de la etiqueta <audio>
En la especificación de HTML5 hay alguno más, que nunca está de más echarle un vistazo, pero estos son los atributos que hay que conocer sí o sí:
autoplay
Autoplay es un atributo booleano. Vamos, que o está o no está, no necesita tener un valor asociado. Este atributo reproduce automáticamente el archivo, así que damos por hecho que eres buena gente y no lo piensas usar.
<audio autoplay src="mi-archivo-de-audio.mp3"></audio>
loop
Este atributo, como su nombre indica, nos permite indicar si queremos reproducir el archivo en bucle. Usarlo en combinación con autoplay te elevaría a la categoría de "troll supervillano" en el mundo del desarrollo web. Procura que no me entere de que los usas juntos o tendré que liberar al kraken. ;-)
<audio src="mi-archivo-de-audio.mp3" autoplay loop></audio>
preload
Preload sirve para precargar tus archivos de audio. También existe el booleano autobuffer, que estaría genial si no fuese porque Safari hace la precarga, exista o no el atributo autobuffer. Así que hubo que introducir Preload, que no es booleano y tiene tres valores: media, auto y none. Si no quieres que tus archivos de audio se precarguen, añádeles preload= "none". La precarga está bien si tienes uno o dos archivos, pero si tienes muchos va a ralentizar mucho la carga de tu página.
<audio src="mi-archivo-de-audio.mp3" preload="none"></audio>
controls
Controls es un atributo booleano que nos permite disponer de un panel de control nativo de cada navegador para, obviamente, controlar la reproducción.
Si no te gusta su aspecto, siempre puedes crear el tuyo con JavaScript a través de la API de sonido. Aquí tienes un ejemplo un poco guarrete ya que usa manejadores de evento en línea, tú deberías hacerlo con JavaScript no intrusivo (me refiero al DOM y estas moderneces, si esto te suena a chino, deberías ir pensando en hacerte este curso de JavaScript).
<audio id="mireproductor" src="mi-archivo-de-audio.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pausa</button>
<button onclick="document.getElementById('player').load()">Stop</button>
<button onclick="document.getElementById('player').volume += .1">Subir volumen</button>
<button onclick="document.getElementById('player').volume -= .1">Bajar volumen</button>
</div>
La cruda realidad: Uso práctico de la etiqueta <audio>
El problema con el elemento de audio no está en la especificación, que es bastante clara, ni en la etiqueta. Como ya comentamos antes, el problema a la hora de insertar sonido en HTML5 radica en los formatos de audio.
Aunque el formato MP3 es omnipresente y nos resulta muy familiar, no es un formato abierto. Debido a esto ningún programa puede descodificar y reproducir archivos MP3 sin tener que pasar por caja.
Eso está bien para los megaempresas como Apple, Google o Microsoft, pero no es tan fácil para las pequeñas empresas o grupos de código abierto. De ahí que nos encontremos a Safari reproduciendo archivos MP3, mientras que Firefox hasta hace unos pocos años no lo hacía, y aún ahora lo soporta de forma parcial porque tira del sistema operativo (puedes encontrar toda la información sobre formatos de audio disponibles en HTML5 y su soporte en cada navegador en esta página de la Mozilla Developer Network).
El caso es que para maximizar la compatibilidad vamos a necesitar usar varios formatos audio. Por ejemplo, con el códec Vorbis (o el códec Opus) se pueden crear archivos de audio con la extensión .ogg, que no se ve afectado por ninguna patente. Ahora bien, Firefox soporta archivos de audio Ogg, pero Safari no.¡Ups!
Por suerte hay una manera genial de utilizar la etiqueta audio sin tener que elegir un sólo formato de archivo. En lugar de sólo utilizar el atributo src en la etiqueta <audio> podemos especificar múltiples formatos de archivo de distintas fuentes así:
<audio controls>
<source src="mi-archivo-de-audio.ogg" type="audio/ogg">
<source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
<source src="mi-archivo-de-audio.wav" type="audio/wav">
</audio>
Así cada navegador reproducirá el primer archivo que pueda reproducir. Ahora, si queremos, podemos echarle un cable a IE8 (y anteriores) y a otros navegadores antiguos que no soporten la etiqueta audio. Para ello podemos echar mano de un reproductor hecho en Flash de manera muy sencilla porque está todo pensado. Todo lo que haya entre <audio> y </audio> que no sea un elemento de la etiqueta será mostrado sólo a los navegadores que no la soporten:
<audio controls>
<source src="mi-archivo-de-audio.ogg" type="audio/ogg">
<source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
<source src="mi-archivo-de-audio.wav" type="audio/wav">
<object type="application/x-shockwave-flash" data="player.swf?miArchivo=mi-archivo-de-audio.mp3">
<param name="movie" value="player.swf?miArchivo=mi-archivo-de-audio.mp3">
</object>
</audio>
En este caso el contenido de la etiqueta <object> se le servirá sólo a navegadores que no soporten la etiqueta <audio>. Pero claro, Flash es una tecnología propietaria y puede que algún navegador no lo tenga instalado o que no lo soporte. ¿La solución? Pues insertar un enlace al archivo de audio para descargárselo:
<audio controls>
<source src="mi-archivo-de-audio.ogg" type="audio/ogg">
<source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
<source src="mi-archivo-de-audio.wav" type="audio/wav">
<object type="application/x-shockwave-flash" data="player.swf?miArchivo=mi-archivo-de-audio.mp3">
<param name="movie" value="player.swf?miArchivo=mi-archivo-de-audio.mp3">
<a href="mi-archivo-de-audio.mp3">Descárgate aquí mi archivo de audio</a>
</object>
</audio>
Así nuestro código nos ha quedado redondo ya que no dejamos fuera a nadie y nuestro archivo de audio lo puede escuchar prácticamente todo el mundo.
Tendrán acceso a él:
- Desde un navegador que soporte la etiqueta audio y el formato MP3
- Desde un navegador que soporte la etiqueta audio y el formato OGG
- Desde un navegador que soporte la etiqueta audio y el formato WAV
- Desde un navegador que NO soporte la etiqueta audio y tenga el plugin de Flash instalado
- Desde un navegador que NO soporte la etiqueta audio y NO tenga el plugin de Flash instalado
Y esto, damas y caballeros, es lo que en el campo del diseño y desarrollo web llamamos degradación elegante o graceful degradation. Ba-da bum tshhh :-)
En conclusión
Con el lanzamiento y adopción de html se nos ha facilitado mucho la vida a la hora de insertar archivos multimedia en nuestras páginas web pero todavía hay chinitas en nuestro camino si queremos dar la máxima compatibilidad debido a los distintos formatos y los obstáculos que suponen las patentes.
Nos queda pendiente sólo una cosa, que sería la accesibilidad, pero mejor lo dejamos para otro post. Sólo te delanto que añadiendo un pequeño detalle a nuestro código nuestro audio será accesible a todo el mundo y además tu página le gustará más a Google. Casi ná.
Fecha de publicación: