5 Libraries and APIs for Manipulating HTML5 Audio

Over the past few months, I’ve come across a number of different libraries that take advantage of the relatively new HTML5 Audio API as well as the more well known HTML5 Audio Element and its simpler API.

I thought I would share a small handful of these libraries in this post to show you what’s possible and what options you have if you choose to create a game or app that requires manipulation of sound files.

Some of the demos included with some of these libraries are pretty nice, and the code for each of these is pretty clean and easy to use.

1. webaudiox.js

Webaudiox.js is not quite a library, but a set of helpers for using the Web Audio API. It has zero dependencies and will work in any browser that supports the Web Audio API.

The documentation provides a simple code example in the form of a boilerplate, as follows:

As indicated in the first code comment, the webaudiox.js helpers file must be included first in order for this to work.

That doesn’t tell us a whole lot about these helpers other than how their syntax looks. To see how it works, take a look at the analyser2canvas Helper. This helper takes advantage of the AnalyserNode Interface to display a visualisation of the played sound in real time.

The webaudiox.js GitHub repo has a number of other examples to try. Naturally, in order for these demos to work, your browser has to support the Web Audio API (more on that later). This set of helpers is not a polyfill, so if you need older browser support, this would not be a good choice unless you were planning to couple this with another script or library, or some kind of fallback.

From what I can see, webaudiox.js is probably a nice choice for use in HTML5 games.

2. Howler.js

Howler.js is touted simply as a “JavaScript audio library for the modern web” that defaults to the Web Audio API and falls back to HTML5 audio.

The features of this library are extensive. Some highlights include:

Support for multiple file formats for wider browser support

Caching features for both Web Audio API and HTML5 audio

Simultaneous multi-track playback

Global and per-track mute/unmute and volume control

Method chaining

3KB gzip’d with no dependencies

The official blog post describing the library includes a number of on-page demos showing what can be done, so be sure to check those out.

To demonstrate the syntax, here’s a cool example of what’s called a ‘sound sprite’, where you define the location of different sounds from within a single sound file:

I love the syntax, the API has a nice clean look, and seems very easy to understand and start using. Because this uses the new Web Audio API and falls back to HTML5 audio, browser support is strong.

The authors of the library describe it as “great for games”, but just as good for any other audio-related web-app.

3. Pedalboard.js

Like the previous libraries discussed so far, Pedalboard.js also uses the Web Audio API, but this time it’s used for creating audio effects on sound sources, specifically focused on guitar effects. In a nutshell, you can use this API to create your own pedal board through which guitar sounds can be manipulated. A great example to show you the power of this API is Pedals.io, “guitar effects in the cloud”:

The syntax for the API is object-oriented so it’s clean and easy to use. Here’s an example:

The code above builds on a “stage” object, which holds the “board”, which in turn contains “pedals” that are able to create the desired effects.

Admittedly, this is not necessarily going to be the most useful library for building games or other apps, but I’m sure with some creative thinking, you can come up with some cool stuff with this. This library works in any browser that supports the Web Audio API.

As a side note, if you like this library, you might also want to check out Band.js, a “music composer” API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.

4. Wad

Wad stands for Web Audio DAW (Digital Audio Workstation) and it’s described as “jQuery for your ears”. It’s a library that helps to simplify manipulating audio using the Web Audio API.

Here’s an example of the syntax, which introduces a piano track synthesized using a “square” wave:

This library is fairly simple and straightforward, so it might be a good choice for a project where you want to build something bigger on the Fifer foundation. The biggest plus is the fact that, as mentioned, it will fall back to Flash when the Web Audio API is not available.

And take note that this API is based on HTML5 audio, not the Web Audio API, so support goes back to IE9 for HTML5 and IE8 and earlier for the Flash fallback.

There’s missing support in some mobile browsers and Safari requires vendor prefixes. The worst news, however, is the fact that there is no version of IE that supports the Web Audio API, not even IE11. It is an open issue with the IE team, so hopefully that will change very soon.

Louis has been involved in the web dev industry since 2000, and is a co-editor of the HTML/CSS content on SitePoint. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.