I want to make some stuff in my browser make sound. My main excuse is the synestizer project.
- Noise generator
- binary unit generator extension API
- many sensible basic mathematical DSP operations, such as modulo arithmetic, transcendental functions, sample and hold…
- reliable low-level sequencing architecture
It’s really more suited to game sound effects than modern 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.
Raw(ish) DSP HOWTOs
If you want to use a library to simplify things, see below. First, here’s the instructions for going “bareback”, which is still reasonably high-level:
- The MDN docs explain everything pretty well from the bottom up, e.g. the AnalyserNode documentation
- There’s no white noise generator! Here’s a pseudo-white-noise-generation-workaround
- The master specification for the WebAudioAPI is not very readable, but still the only documentation for some points.
- the HTML5rocks tutorial
- Buffer management
- Creativejs webaudio howto
- Tizen audio API
Web Audio libraries
Simplifying repetitive tasks. Which of these is the hottest? I updated this list to include the openhub widgets, which give a somewhat-current estimate of the development activity, since they are all pretty sporadic.
A chiptune algorave project, Speccy has neato dorky sequencing in the browser. Integrates with random synth toy sfxr.
Tone.js is another webaudio framework; a particular selling point is that is 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.
…is a bunch of helpers for WebAudio API. It isn’t a library per se. You can use any of those helpers independantly.(sic)
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 its too simple to need additions, just copy-paste what you need.
Flocking attempts to create a declarative JSON-style audio language, with inspiration from supercollider.
Gibber claims to be a full-featured “livecoding environment”, which is not my focus, but perhaps it has good parts fo rmy 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.
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.
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.
Timbre.js is another webaudio library. It was an early adopter, but also stagnated early.
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.
omnitone does 3d decoding of ambisonic, for all your surround-sounds needs.
react-music is a cute hack - composable React componenets which happen to produce audio
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.
- Tone.js does sequencing very well
- motor.js is a step sequencer, very simple and pretty.
- Jazzari is a cute example of a minimal algorithmic sequencer.
- manual sequencing example from a MIDI player.
- Essential tutorial on Scheduling
Why does my sequencer slow down when I change tabs?
Audio UI libraries
This is surprisingly a big enough topic to merit its own section on the UI page; It’s not an exciting surprise though, it’s one of those things that is simultaneously surprising and tedious, like unexpectedly discovering the tax return that you thought you submitted a month ago still on your desk.
Works! (At least in Chrome) Read the WebMIDI spec. Works well with Tone.js.
Some explained, some for reverse-engineering, all simple.