1. Home
  2. Demos
  3. From Howler.js

Keep your Howler code. Change one line.

soundhub/howler has the Howl and Howler you already use, running on one shared SoundHub. Change the import and the rest keeps working. When you want something Howler does not have, such as ducking, Howler.hub hands you the hub.

The migration

One import

- import { Howl, Howler } from 'howler';+ import { Howl, Howler } from 'soundhub/howler';   const sfx = new Howl({    src: ['/audio/sfx.webm', '/audio/sfx.mp3'],    sprite: { laser: [0, 400], coin: [500, 300] },    onend: (id) => console.log('done', id),  });  const id = sfx.play('laser');  sfx.volume(0.5, id);
  • The same optionssrc, sprite, loop, volume, rate, html5, autoplay and the on callbacks.
  • The same unitsMilliseconds for sprites and fades, seconds for seek() and duration().
  • One hub underneathHowler.hub is a SoundHub. howl.soundhubId is the id of a Howl in it.
  • Not coveredHowler.autoSuspend, orientation and the panner settings per Howl. The hub has them.

Try it

Howler code, running on soundhub

Three Howls made with new Howl(), driven with the Howler methods. The console at the bottom prints each call, and its Events tab shows what the hub underneath made of it.