I want to make sound in my browser. 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 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.
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 notably 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 - composeable React components 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 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/seconds; look out for that).
[wavesurfer.js)[https://wavesurfer-js.org/) is a widget that plots the audio waveform as well as providing a player.
Works! (At least in Chrome) Read the WebMIDI spec. Works well with Tone.js.
Some explained, some for reverse-engineering, all simple.