The Best JavaScript Audio Libraries for Manipulating Sound
By: Tate Galbraith
Tags: Technology, JavaScript, Audio, Code, Programming

Merging code with sound design can be an often overlooked specialization of programming. Unless your daily tasks center around programmatic sound design for games or other interactive programs you might not think twice about having to manipulate sound via code. Downloading prepackaged samples is easy enough and playing a clip is also straightforward, so why reach for anything more complex?

The world of programmatic sound design is an immense and wonderful one filled with many different areas of focus. You can build lush sonic environments for games, create unique virtual instruments and develop collaborative musical composition systems right from the browser. The power packed into modern browsers like Chrome or Firefox would rival that of many dedicated hardware synthesizers of years past. Being able to develop instruments and sounds with nothing other than JavaScript is a fantastic modern option. This is especially useful if you’re trying to incorporate an audio experience into an existing lightweight web application.

Which area of sound design you focus on is entirely up to you. Having the right tools at your disposal for the path you decide on is crucial. In this article we’ll explore the unique and fascinating world of sound manipulation available with JavaScript and some of the incredible libraries that make it easier than ever. Let’s get started.

First on this list is a total powerhouse of an audio library. Tone.js packs in features for different virtual instruments, sequencers, effects and more. This is truly one of the most comprehensive libraries on this list. With Tone.js you can build robust musical capabilities into most web applications and leverage more functions than you normally would be able to with just the Web Audio API.

Although Tone.js is one of the more complex libraries to use because of its extensive set of features, it still provides a pragmatic and intuitive interface. Attention to detail is clearly an important tenet with Tone.js. One great example of this is the inclusion of a gradual BPM ramping function (loop setup is omitted for brevity, reference here for full setup):

... Tone.Transport.start();

Tone.Transport.bpm.rampTo(200, 5);

By using the bpm.rampTo function you can tell Tone.js to slowly increase the BPM of the previously defined loop to 200 over the course of 5 seconds. Having an out-of-the-box feature like this saves a ton of time building out a complex BPM control scheme and let’s you focus on being creative.

If you’re ready to sink some time into learning Tone.js I highly recommend Jim Bennett’s fantastic article: Tutorial: Let’s Make Music with JavaScript and Tone.js. In this article Jim walks through how to setup the Tone.js basics and details the fundamentals of music composition using the library.

For even more examples, check out the official Tone.js documentation.

Pizzicato.js is another well-rounded library that provides a feature-packed set of tools to create everything from compositions made up of sample groups to precisely synthesized sounds. There is a fairly extensive set of built-in effects and other audio manipulation tweaks that help you craft the perfect sound. Some of the effects include flanger, distortion, reverb and tremolo.

Creating instruments with Pizzicato.js is incredibly straightforward. After importing the library you can craft a simple sine wave instrument by doing the following:

const synth = new Pizzicato.Sound({

source: 'wave',

options: { type: 'sine', frequency: 440 }

}); synth.play();

The snippet of code above simply creates a new Sound and then assigns the corresponding source and source type. There are many other sources and types to choose from as well.

Check out the Pizzicato.js demo site for more details on how to use this awesome library.

This library is an excellent example of one that provides a variety of unique functionality not native to the Web Audio API. With WadJS you create different types of “wads” that allow you to setup different sound sources and effects. Just like many of the other libraries you can setup basic synthesizers and sample playback objects, but what WadJS gives you that they don’t is unique and specific use-case functions.

The first interesting feature of WadJS is an object called the SoundIterator. This allows you to step through a group of sounds in either a random or predefined order. Like author Raphael Serota says, this would be “good for footstep sounds” but you could also use this to stitch together smooth environmental sounds like running water or wind noise.

Another excellent feature included with WadJS is a pitch detection PolyWad. This will accept a audio input and attempt to determine the frequency and note name of the source. This is an amazing feature to have in your arsenal and opens up a whole realm of possibilities for interactive applications. For example, you could have users interact with an app by humming a certain pitch into their microphone and displaying how accurate they are.

Check out the WadJS API Documentation for more detailed information.

Rounding out our collection of excellent libraries we have jsfx. This library has a little different focus from the rest. This is all about sound effect generation. Rather than attempt to be a kitchen sink of sonic functionality, jsfx provides a quick and easy way to generate a library of sound effects. Although this particular library is less active and a few years old it still provides great examples of how to construct different sounds using the API.

After cloning the repository you simply load up index.html and are provided with a dashboard for creating various sound effects. Some of the basics include “reset”, “coin” and “laser” which implies that this library is geared towards game sound design.

A portion of the jsfx sound effect dashboard.

Once you’ve generated your desired sound effect by tweaking the various sliders, you can save it to the library with a unique name. In order to use your new library of sounds, you have to download a configuration JSON blob and then provide that somewhere in your application along with jsfx. This is a unique way of building very portable sound libraries and also provides great examples of how tweaking different parameters alters the overall sonic shape.

For more detailed jsfx usage information reference the GitHub documentation.