This repository contains 6 implementations of classic synthesis techniques using the Web Audio API:
- Theremin: A basic monophonic synthesiser where the pitch and volume of a single oscillator are controlled using the mouse pointer, a bit like waving your hands near a Theremin
- Additive Synthesis: Create sounds by adding together sine waves. This demo also shows how to achieve polyphony (playing multiple notes at the same time) with the Web Audio API.
- Subtractive Synthesis: A simple subtractive monosynth - create sounds by filtering sawtooth waves.
- FM Synthesis: An implementation of the "brass-like sounds" from John Chowning's seminal paper on Frequency Modulation Synthesis.
- Sampler: A demonstration of how to load samples from an external source, map them to keys, and play them back at various time offsets. Samples the "Amen break".
- Granular: A basic granular synthesis engine with variable grain length and grain density.
In addition a simple class keyboard.js shows how to map QWERTY keys
to midi note numbers.
Each directory contains a file index.html. You'll need to arrange
for that to be served locally to run the demo as some of them make
requests for external resources that need to be served on the same
origin. You probably have a favourite way of doing that. I like
Anvil for Mac as it's really easy to use.
When writing these examples I tried to keep the ratio of Web Audio code to boilerplate as high as I could. I've avoided libraries, frameworks and build tools to make the code as simple as possible to understand (for you, and for me!). I'd love it if you took this code, played around with it, changed the parameters, added features and used it to understand how to make interesting, beautiful sounds using the Web Audio API.
At the moment, this code is presented as-is, and without commentary, although I've tried to make it as easy to follow as possible.
I cover some of the background theory in my ScotlandJS talk (video to follow). For the rest, I'm planning to write a book on this subject, and expand on these examples and others in greater detail. If that sounds interesting to you, please subscribe to my newsletter to be the first to hear about it.