Javascript audio

Every program will expand until the point that it can generate cheezy techno

November 25, 2011 — January 16, 2023

computers are awful
javascript
music

By JavaScript audio I mean in particular, web audio for JavaScript, i.e. in the browser. If you want to use JavaScript as part of a more general audio coding thingy, great, but I know nothing of that.

I want to make sound in my browser. My main excuse is the synestizer project.

There is a reasonably mature javascript API for audio; but it is missing various things you might be used to:

It’s more suited to game sound effects than arbitrary synthesis. But it works, fast, and it’s everywhere, and it comes with integrated web services, openGL and UI libraries, and runs on Android tablets, so there are some positives. Therefore, let’s see how it can be made convenient.

1 Raw(ish) DSP HOWTOs

If you want to use a library to simplify things, see below. First, here are the instructions for going “bareback,” which is still reasonably high-level:

2 Dittytoy

Not an embeddable library as such but a site with nifty API design for JS audio

Incredible example:

3 Web Audio libraries

Simplifying repetitive tasks. Which of these is the hottest?

3.1 Speccy

A chiptune algorave project, Speccy has neato dorky sequencing in the browser. Integrates with random synth toy sfxr.

3.2 Tone.js

Tone.js is another webaudio framework; a particular selling point is that it has its own timing/scheduling system which is what is actually missing from the JS Audio. Also people are actually developing it still, which is not the case for everything else.

3.3 Webaudiox

Webaudiox

…is a bunch of helpers for WebAudio API. It isn’t a library per se.

It appears to in fact be precisely a library, unlike the various crazy frameworks on display here. I regard this as a plus. Technically it’s abandoned, but that might also be because it’s too simple to need additions, just copy-paste what you need.

3.4 Flocking

Flocking attempts to create a declarative JSON-style audio language, with inspiration from supercollider.

3.5 Maxim

Maxim is a JavaScript port of Mick Grierson’s C++ library Maximilian.

3.6 Gibber

Gibber claims to be a full-featured “livecoding environment”, which is not my focus, but perhaps it has good parts for my use? (see also the manual). Its style is too opinionated for my tastes, and it has a weird DSL that is even slower and less consistent than JS itself. However, the maintainer is passionate.

3.7 WAAX

WAAX is a fancy library, with synthesizer abstraction that feel less imperative and more declarative. However, the abstractions also feel over-engineered, and the boss-guy has been hired by Google and dropped out leaving the code less maintained.

3.8 Audiolib.js

audiolib.js is one of the others to have sequencer abstractions but is also abandoned. Its chief virtue is a lucid introduction to web audio on its homepage.

3.9 FaustDSP

The incredible Faust DSP language can target optimised JavaScript (To learn: how to mix JavascriptNode and native AudioNode with this approach.)

3.10 Webpd

WebPd is a partial port of puredata to JavaScript. This is a bizarre project — partially porting one obscure high-level audio language to a less obscure high-level audio language doesn’t open up many new horizons AFAICT. Nonetheless I like the puredata community — who tilt the best windmills — so it deserves a link.

3.11 Timbre.js

Timbre.js is another webaudio library. It was an early adopter, but also stagnated early.

3.12 Audiocomponents

Audiocomponents is a strategy to use the new webcomponents system to (more or less) make Webaudio a matter of pure HTML. Webcomponents are something I might use when the dust and standards wars have settled and they integrate with other stuff, if they have provided any concrete benefit after all that.

3.13 omnitone

omnitone does 3d decoding of ambisonic, for all your surround-sound needs.

3.14 React-music

react-music is a cute hack — composeable React components which happen to produce audio

4 Sequencing

I don’t know why there are so many audio libraries; The most tricky thing is sequencing, and of course, most would rather paint the bike shed than solve that one.

4.0.1 Why does my sequencer slow down when I change tabs?

🏗

5 Audio UI libraries

This is a big enough topic to merit its own section on the UI page.

NB certain complexities arise for audio stuff (e.g. you don’t really want to use React to update your GUI 44100 times/second; look out for that).

5.1 wavesurfer

wavesurfer.js is a widget that plots the audio waveform as well as providing a player.

6 MIDI

Works! (At least in Chrome) Read the WebMIDI spec. Works well with Tone.js.

7 Cute examples

Some explained, some for reverse-engineering, all simple.