Pedro Gutiérrez

howler.js es un pequeño framework que nos ayuda a manejar el sonido en una página web (con el audio de HTML5), nos permite controlar todo lo más básico (reproducir y parar) y nos brinda la posibilidad de tener unos efectos de entrada y salida del audio de forma progresiva, pero sin duda lo más interesante del framework es que nos permite hacer sprites con un archivo de audio (o lo que es lo mismo, tener un archivo con muchos sonidos y hacer sonar una parte determinada).

El uso de esta herramienta por ejemplo en la creación de juegos HTML5 puede ahorrarnos mucho trabajo y mucho ancho de banda, ya que por un lado nos permite crear sprites (con lo que reducimos el número de peticiones) y por otro lado elige directamente que archivo debe reproducir en la lista de archivos que le damos.

Como usarlo

El uso es muy simple, por cada archivo que carguemos tenemos que crear un nuevo objeto (aunque después puede ser un archivo que contiene varias pistas) y le tenemos que pasar como argumento un objeto con todos los parámetros del audio. Este es un ejemplo del código básico para reproducir un bucle de audio:

var sonido = new Howl({ urls: ['sonido.mp3', 'sonido.ogg', 'sonido.wav'], autoplay: true, // true = se autoejecuta loop: true, // true = bucle de audio volume: 0.5, // Nivel del volumen [0-1] onend: function() { // Se ejecuta al finalizar la pista alert('Fin'); }})

En el siguiente supuesto usaríamos dos sonidos de audio, de distinto formato por mantener la compatibilidad con todos los navegadores y lo dividiremos en varias pistas (aplauso, disparo y sirena).

var sonido = new Howl({ urls: ['sonido.mp3', 'sonido.ogg'], sprite: { aplauso: [0, 2000], disparo: [2000, 200], sirena: [5000, 5000] }})// Reproducimos todo el archivo con este métodosonido.play()// Reproducimos desde los 2s durante 200ms (aplauso)sonido.play('aplauso')

El objeto sprite contiene las distintas pistas de audio, el primer parámetro pertenece al inicio de la pista y el segundo parámetro a la duración, todo en milisegundos. Lo reproduciremos con el método play() (en este caso sonido.play('aplauso')), de la misma forma que podemos reproducir cualquier archivo de audio, incluso varios al mismo tiempo.

Más información | howler.jsVía | Antonio Navajas