Cómo insertar audio en HTML5
Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Cómo insertar audio en HTML5

Insertar etiqueta audio en HTML5

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á

Pablo Iglesias Pablo Iglesias es diseñador y responsable de Marketing en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web

Comentarios (5) -

Oscar Morales
Oscar Morales

Hola, quería preguntarte si eres tam amable, tengo en mi blog de blogger un reproductor que hasta hace un par de días funcionaba perfecto, el hecho es que no se que pasa con google y Shoutcast que ya no emite, tengo una radio y utilizo como servidor listen 2 my radio, gratuito. Podrías echarme una mano con un código que pueda funcionar en blogger, de hecho el que tengo funciona, pero solo en el navegador EDGE de windows 10, es curioso, desde ya muchas gracias.

Responder

Pablo Iglesias
Pablo Iglesias

Hola Oscar,

No te puedo ayudar demasiado porque no conozco como funcionan ni esos servicios ni ese reproductor.

Yo, si estuviese en tu lugar, empezaría por lo más sencillo: quitar todas las extensiones de tu navegador habitual (para evitar posibles conflictos) y copiar de nuevo el código que te da tu proveedor para volverlo a pegar en la template de Blogger. A lo mejor han hecho alguna actualización y por eso ha dejado de funcionar tu reproductor.

Saludos

Responder

Hola Pablo, muy bueno tu artículo.
Te hago una consulta; que reproductor recomendás para poner en mi página web qu sea compatible con todos los navegadores?  Actualmente tengo uno de la pagina muses pero parece que no es compatible con chrome.
Muchas gracias y saludos

Responder

Pablo Iglesias
Pablo Iglesias

Hola Javier,

Muchas gracias por el cumplido, pero no tengo ahora mismo "fichado" ningún reproductor en especial.

No obstante, he hecho una búsqueda rápida en Google por "html5 cross browser player" y me ha llamado la atención JPlayer: http://jplayer.org/

Podría ser un buen sitio por dónde empezar, pero ya te digo que no lo he probado a fondo y no puedo saber si se ajustará  plenamente a tus necesidades.

¡Saludos!

Responder

Hola Amigo,

Me sirvio mucho tu artículo.
Inserté <audio> con 3 <source> diferentes para cada navegador. Pero desde un smartphone, en Chrome, el audio no se reproduce. Sabes que puede estar afectando esto?

Saludos y gracias!

Responder

Agregar comentario