If you’ve ever wondered how music visualizers like MilkDrop are made, this post is for you. We’ll start with simple visualizations using the Canvas API and move on to more sophisticated visualizations with WebGL shaders.
Web Audio Supersaw Synthesizer
If you’ve ever built a virtual synth before, you know that trying to reproduce the analog sound is really hard1. It’s better to compete where digital has a comparative advantage, like spawning hundreds of oscillators dynamically. That’s the essence of the supersaw synth: stack a bunch of sawtooth oscillators on top of each other, each at a slightly different frequency.
Here’s the demo and the code. There are only two knobs: one to control the number of oscillators; the other to control how out-of-tune each oscillator is. It’s simple, but it can make some cool sounds. Read on if you want to learn how to build your own.
You can get pretty far with the built-in Web Audio API nodes, but to really turn things up to 11, you may need to write custom audio effects in JavaScript. This post shows you how.
Korg Monotron synthesizer
The Monotron is an awesome little analog synth by Korg. In this post, you’ll learn how to recreate the Monotron with the Web Audio API.
This is a long post, so to get an idea of what you’re building, check out the demo and the code on GitHub.
One of the main shortcomings of the Web Audio API is that there’s no native support for generating noise. This post will teach you how to overcome that limitation.