Blog

Sound sprites in Processing.js with Howler.js

feature-image

Download Project Files:

Howler.js Demo

Tutorial Required Skills:

  • Basic level of Java/Processing.
  • Basic audio editing skills (Adobe Auditions).
  • A tiny bit of JavaScript.

Introduction:

Sound spriting is a technique very similar to css spriting for images. The process involves compiling all the sounds you intend to use in your processing sketch into one file and then using code to play different sections of that file when necessary. We will be using the JavaScript library Howler.js in this tutorial, which is capable of sound spriting out of the box so the process is very, very simple. As this library is written in JavaScript, you will have to install and activate JavaScript mode in the Processing IDE for this tutorial to work.

The Stages Of This Tutorial:

  • Prepare the individual audio files;
  • Consolidate the separate files into one;
  • Make a note of the start time and duration of each separate audio sample;
  • Export the file to OGG and MP3;
  • Import the Howler.js code into processing;
  • Write some JavaScript to control the playback of the sounds.

Let’s Begin… 

In this tutorial we will be using Adobe Auditions to create the consolidated sound files. Obviously, any good audio editing software will do but Auditions has some handy features to fast track the process. I will presume that you have already prepped the individual sound files: all mastered and ready to consolidate.

Open up Auditions and select “Open Append” from the File menu.

Create new file

Select all of the audio files you want to consolidate.  In this example there are only two samples but you can select as many as you need. Click “Open” and Auditions will automatically append the files together into one track and then create markers with all the information we need to implement the code later.

Select files

Next, locate the Markers window and make a note of the name of the track, start time and duration of each marker. This information is vital when we come to write the code for Howler.js. (Usually, I just screen shot the markers panel as a permanent record).

Make a note of the marker information

Finally, export the file out for use in our sketch. Due to the nature of web audio, we will need to export the file out twice: once as a .OGG file and then an .MP3.

Export files

Make sure that you know where you saved the file in your file system so that you can find it later to drag into your Processing sketch.

The Code:

Make sure that you have the Processing IDE in JavaScript mode. The sketch for this example consists of 4 tabs: the main sketch tab, a player object tab, the howler.js tab and a script.js tab.

Here’s how it should look (don’t worry about the code for the tabs yet!):

The Tabs

Let’s take a look at the example code without any sound first. Most of the code is explained within the comments of the code except for where the steps involve actions that are beyond the scope of the code, such as adding files or importing howler.js.

The main sketch tab:

The main sketch sets the stage and defines an object of the player class.

Player Class Tab:

Sets up a basic character that is capable of moving around the stage but if it exceeds the boundaries, it will bounce off the side. At the moment, the Player class does not use any sound but later on this class is where we will trigger the sound from.

Adding Sound:

Before we go any further, let’s add the two sound files that we exported earlier into our sketch. The best way to add any file to your sketch by dragging and dropping it straight on top of the Processing IDE window.

Drag and drop

OK, so that’s the foundation work done but now we want to add the functionality to play sound. For this example, we are going to trigger the sound in two places: first when the user applies acceleration to the player and secondly when the player bounces off the sides. At this stage, it is vital that we acknowledge the tensions of using JavaScript mode in Processing; we are inevitably coding in two separate languages. Luckily, with the help of the processing.js library, the duplex of syntax plays fairly well together.

Whenever you add JavaScript to your Processing sketch you must create tab names that end in “.js”, that way the IDE will know how to handle them. You can include pretty much any JavaScript library you want and there are a lot out there.

Including the howler.js library into the Processing IDE:

If you have not already, create a new tab called howler.js and then head over to the howler.js Github raw code page and copy the code:

Howler.js rawcode

Then paste that code into the howler.js tab.

Utilising howler.js Library:

Now that we have added the JavaScript library, we need to write some JavaScript to utilise the library. For more information on writing Javascript for howler.js visit here.

If you have not already, create a new tab called script.js. This is where we will write any custom JavaScript we need to add to our sketch. Copy and paste the code below into this tab. Hopefully the code is commented enough that it should make sense.

 

Finally, all that’s left to do is call the JavaScript function from within the Player class tab. Wherever you want to trigger the sound, you just have to write one line of code:

These means in order the complete the Play class, we need to change the checkBoundaries method to play a sound every time the player hits the side like this:

We could also change the player class so that when there is user input we play the rocket sound:

And that’s it!

Now you made it through the tutorial you deserve a present… here’s a video: