How to create AudioSprites to use with howler.js

On this post, we’ll check what audiosprites are and how we can create them to use in our project through howler.js audio library.

What is an AudioSprite

An audiosprite is an audio file containing multiple sounds plus, a json file containing an object defining the times where each audio begins and its length. It’s the same concept as spritesheets or atlases with images but in audio context.

JavaScript for Sound Artists: Learn to Code with the Web Audio API

When should I use AudioSprites

If your project contains a bunch of sounds of a really tiny length, like sound effects from 1 to 5 seconds, and packing them together doesn’t create a huge file size, you can consider using audiosprites.

This way, when the user accesses to the website and the browser downloads them, it makes less connections to the server, and maybe saves a little time. But as I said before, be careful with the final audiosprite file size or it would be heavier and then slower to download.

How can I generate an AudioSprite

By using the ‘audiosprite’ library from tonistiigi https://github.com/tonistiigi/audiosprite we can generate the complete process of one mp3 with all sound effects + a json including sounds lengths and beginning times adapted to the format that howler.js needs.

AudioSprite library setup

1.) Install Node https://nodejs.org/es/download/

2.) Intstall Git Bash and use it as console/terminal, in other terminals such as the one in IntelliJ Idea or Webstorm it doesn’t work.

https://gitforwindows.org/

3.) Download ffmpeg https://ffmpeg.zeranoe.com/builds/ and follow STEP by STEP the following guide:

• How to Install FFmpeg on Windows: https://www.wikihow.com/Install-FFmpeg-on-Windows
• IMPORTANT: On guide’s part 2: Enabling FFmpeg in the Command Line on the 6 step we need to do this:
  If you want to enable FFmpeg for all users on this computer, you’ll instead double-click Path in the “System variables” section near the bottom of the window.
• Otherwise, the library will be only available for the admin user.
• On the last step of the guide where you check if the library has been installed correctly and if it’s accesible with the ffmpeg -version command on Git Bash, if you had Git Bash opened, close it and open it again, because Git Bash doesn’t get updated that a new environment variable has been set, so it will crash saying the library hasn’t been installed correctly.
• If everything went well… Congrats!! ffmpeg is already installed and accessible :)

4.) Finally, install audiosprite:

npm install -g audiosprite

Learn Pixi.js

Using AudioSprite library

1.) Open Git Bash and browse the folder with the mp3 files you want to use.

2.) Write the following command, changing the paths and filenames:

audiosprite --path ‘C:/MyProject/audiosprites’ --output myAudioSpriteFinalFile -f howler --export mp3 audio1.mp3 audio2.mp3

• path -> the path where we save the generated files.
• output -> name of the generated files(myAudioSpriteFinalFile.mp3 and myAudioSpriteFinalFile.json)
• f -> json format.
• export -> this is to limit to only export in mp3 format.

3.) On the folder we added to the path, we’ll find myAudioSpriteFinalFile.mp3 with all audios embedded in one and myAudioSpriteFinalFile.json with every sound defined as an object with length and initial position:

{
"urls": [
   "C:\MyProject\audiosprites\myAudioSpriteFinalFile.mp3"
],
"sprite": {
   "audio1": [
   0,
   600.8163265306123
   ],
   "audio2": [
   2000,
   522.4489795918367
   ]
  }
}

Using AudioSprites on howler.js

Depending on your project requirements and how you use howler.js, now it’s up to your project structure how to add this support, the official doc provides this example:

var sound = new Howl({
  src: ['sounds.webm', 'sounds.mp3'],
  sprite: {
    blast: [0, 3000],
    laser: [4000, 1000],
    winner: [6000, 5000]
  }
});

// Shoot the laser!
sound.play('laser');
https://github.com/goldfire/howler.js#documentation

Here it is a basic example using custom AudioSprites: https://www.nomisoft.co.uk/articles/audio-sprites-with-howler-js

And we reached the end of the post, the trickiest part is the AudioSprite related libraries setup, so be patient and follow carefully all the steps. When you achieve this, the rest should go pretty smooth :)

Advanced Game Design with HTML5 and JavaScript