An early barrel organ

Thoughts on improving Web Audio

Did you know there’s an entire sound synthesizer inside your browser? It’s one of the features of the Web Audio API, and it’s amazing.

Here’s a fun demo.

Sound synthesis has so much potential. Our brains are wired for sound, and the web rarely takes advantage of that. The Web Audio API allows for nuanced programmatic sound, whether it’s for a web game or a notification sound. It’s been available in browsers for two years, but I’ve seen very little adoption of the synthesis features.

The Web Audio API is quite comprehensive, and that can be a bit overwhelming for people who want to jump in. So, as with many of the HTML5 APIs, there are JavaScript libraries (Wad.js, Tone.js, Timbre.js, Soundstage, and Pizzicato are the major ones) that provide a simpler interface on top of the core API.

I just released a Chrome extension that uses the Wad.js, and it’s my first experiment in Web Audio. With my outsider's eye, I see four big issues that are diminishing wider adoption of Web Audio:

  1. Web audio libraries aren't opinionated enough. Musicians love specific hardware synthesizers for their clear point of view about sound synthesis. The signal path and adjustable parameters have been chosen — and limited — by the designers. This leave a lot of room for creativity, but in a narrower range than, say, a modular synthesizer. That’s good for most people, and especially for beginners. Current libraries favor broad flexibility over tight creative constraints.
  2. Too few presets. A hardware synth comes with hundreds of sound presets. These are good-sounding, thoughtfully-designed starting points. You can switch on the synth, press a key, and it already sounds nice. On some synths, everything you do begins with a preset. Eventually you begin to create new sounds by adjusting presets to your liking.
  3. There’s no playground. Most of the existing libraries have demos and code samples. As a developer, I want a playground. A place where I can twist some knobs, find a sound I want, and generate a code snippet that I can use in my program. To me, this is the most crucial piece, yet none of the libraries offer it. There are a many simulators of classic hardware synthesizers available on the web, from the Commodore 64’s SID chip to the Theremin, to the Moog Prodigy. There’s even an amazing modular synth simulator. These are all great, but they are black boxes. I can’t export the sounds I create for use in my program.
  4. Inline code samples in the docs are not playable or adjustable. This seems critical for learning, in an intuitive way, how a sound library works. It’s the precursor to a full playground. (One of the libraries I saw did have playable docs.)

I’d like to see a web audio library that prioritizes fooling around. Because in the realm of sound, that’s how we arrive at things we like. The design prompt is: How quickly can a developer or sound designer make a useful sound that they can incorporate into their code?

The library that makes space for fooling around will become the jQuery of web audio. And when that exists, I think it will really open up the beauty of the Web Audio API to more developers.