Skip to content

v1.1.0 - Sprite support

Compare
Choose a tag to compare
@joshwcomeau joshwcomeau released this 31 Jan 14:31
· 100 commits to master since this release

For projects with more than a couple of sounds, a sprite can be used
to save on network requests. Similarly to graphic sprites, a sound
sprite is one long file.

Traditionally this has been a hard thing to implement, but Howler
makes it very simple. I've upgraded redux-sounds to enable this
functionality.

To use, simply attach a sprite object to your sound data:

const soundData = {
  regularSound: 'path/to/sound.mp3',
  animalSounds: {
    urls: ['path/to/sprite.mp3'],
    sprite: {
      bear: [0, 1000],
      wolf: [1200, 1500],
      lynx: [2000, 4500]
    }
  }
}

The sprite object takes the name you want to assign to your sounds
as keys, and an array of the start/end time of the sprite, in
milliseconds. In this example, sprite.mp3 has 3 sounds: the first
one starts immediately and lasts 1 second, the second runs from 1.2s
to 1.5s, and the third runs from 2s to 4.5s (lynxes are verbose!)

Then, when you want to trigger this sound effect, separate the sound
name from the sprite name with a period:

dispatch({
  type: WOLF_ATTACK,
  meta: {
    sound: 'animalSounds.wolf'
  }
});

And that's it! Happy sprite-ing =)