Audio con HTLM5

La inclusión de la etiqueta audio en HTML5, nos ofrece la posibilidad de ofrecer sonido en nuestra página de forma nativa para el navegador, de una manera muy similar a lo que hace la etiqueta video.

El audio como un recurso nativo e integrado, junto con el resto de etiquetas multimedia de HTML5, es una de las noticias más esperadas dentro de los nuevos desarrollos. Ya no debemos recurrir a herramientas externas, aunque de todas formas es posible utilizar plugins (Flash, Java Script) y hoy en día se siguen usando en masa.

Etiquetas Para Reproducción de Audio con HTML5

La etiqueta elemental nos permite reproducir el sonido en forma directa desde HTML5.

Etiqueta <audio>

<audio src=”micancion.mp3”></audio>

Eso es todo, algo muy sencillo. Sin embargo, aquí no queda la cosa, siempre necesitaremos otros elementos que nos permitan controlar la emisión del sonido así como los controles para que el usuario disfrute y maneje a voluntad la reproducción. Todo ello lo conseguiremos a través de los atributos de la etiqueta audio.

Por suerte, el elemento audio ya es reconocido por la mayoría de los navegadores más usuales. A pesar de ello, no todos manejan los mismos formatos, por lo cual es una buena idea presentar la misma pieza de sonido en varias modalidades. El atributo “src=” informa sobre el archivo a reproducir. Pero existe una etiqueta especial para ofrecer más opciones en cuanto a formato.

Etiqueta <source>

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

Ahora sí estaremos en condiciones de incluir música en nuestra página, de tal forma que el navegador elija el formato que le sea compatible, en este caso ogg, mp3 o wav, aunque pueden agregarse líneas con otros archivos, para tener la seguridad de que el browser encontrará el que pueda reproducir.

Los Atributos de <audio>

La fuente de sonido

El atributo <src>, como se puede ver en el primer ejemplo, es el que indica la URL del archivo de sonido, cuando éste es único. Si disponemos de más formatos a elegir, como vimos, debemos utilizar la etiqueta <source>.

Los controles del audio con HTML5

Claro que en la mayor parte de los casos deseamos que nuestro lector tenga acceso a controles mínimos como los botones de play y pause. Para ello contamos con el atributo <controls>. Este atributo, de sencilla implementación, mostrará los controles habituales en pantalla. Cada navegador tiene un modelo diferente en cuanto al aspecto gráfico, aunque sus funciones son idénticas.

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

Cuándo Comenzar la Reproducción

Siempre podemos decidir que el usuario vea los controles de audio y presione play para comenzar, o de lo contrario que la reproducción se inicie de inmediato, una vez que la página termine de cargarse. Para esta última opción, utilizaremos el atributo autoplay.

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

Si deseamos evitar demoras, convendrá que nuestro archivo de sonido se cargue en una memoria especial o buffer, durante la carga de la página. Esta necesidad está resuelta por HTML5 a través del atributo preload.

<audio controls autoplay preload=”auto”>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
</audio>

El atributo preload cuenta con tres parámetros posibles que indican al navegador el momento en que el autor de la página decidió comenzar la reproducción.

• preload=”auto” indica que el archivo deberá cargarse durante el tiempo de carga de la página.
  
• preload=”none” especifica que esta acción no se realice.
• preload=”metadata” se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.
  

Hay que tener cuidado con este atributo, no recomiendo usarlo si no es estrictamente necesario, puesto que resulta muy molesto entrar en una página web y empezar a eschucar sonido sin saber de donde, a parte de que consumimos ancho de banda innecesario.

Escuchar y Volver a Escuchar

El atributo loop cumple con la misión del título. Es decir, una vez que se ha reproducido todo el archivo de audio, éste se reiniciará.

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

Los Controles: Integración con Java Script

Probablemente deseamos ofrecer mayor control sobre nuestro elemento de audio al cliente o lector de nuestra página. Para lograr este objetivo, vamos a encontrar que HTML5 está integrado con Java Script de una forma sencilla y eficaz. Algunos de los elementos (funciones, métodos) JS que podemos utilizar son los siguientes:

• currentTime, para mostrar el tiempo de reproducción actual.
• duration, que nos muestra el tiempo total esperado de reproducción.
• onplay(), una indicación de que la reproducción está en marcha.
• onpause(), nos permite saber que la emisión ha sido suspendida (está en pause).
• onerror(), nos indica que se ha producido un error y la reproducción ha sido suspendida.
  

También podemos utilizar los controles de reproducción, pausa y volumen a través de funciones:

<audio id=”reproductor”>
    <source src="micancion.ogg" type="audio/ogg" />
    <source src="micancion.mp3" type="audio/mpeg" />
    <source src="micancion.wav" type="audio/mpeg" />
</audio>

<div>
    <button onclick=”document.getElementById(‘reproductor’).play()”>Reproducir</button>
    <button onclick=”document.getElementById(‘reproductor’).pause()”>Pausa</button>
    <button onclick=”document.getElementById(‘reproductor’).volume+=1”>Aumentar</button>
    <button onclick=”document.getElementById(‘reproductor’).volume-=1”>Disminuir</button>
</div>

Como es notorio, se ha abierto una gran variedad de posibilidades para que nuestra música y sonido en general lleguen a nuestros usuarios. Disfrutemos de esta novedad de HTML5. La emisión de sonido a través de Internet y de nuestros desarrollos nunca había sido tan sencilla.