The other day I woke up half on autopilot — one of those mornings where the body gets up before the brain. I shuffled to the kitchen, hit the coffee machine's button, and just stood there, listening. And for the first time in ages I really heard it: the little motor humming on a low, steady tone, water bubbling over it in an uneven treble, and at the end that hiss of escaping steam. For some reason my still-sleepy brain thought: "this is almost a chord."
I took the cup out to the balcony and the game kept going. A car horn down below — a well-defined note, you could sing it. The neighbor's microwave beep, always on the same pitch. My laptop keyboard, with its dry, percussive click. And then came the question that made me put the coffee down and open my editor: what if every sound of my day were a note? What if I could make sound from nothing, with no instrument at all, just code?
Spoiler: the browser is already a studio
The wildest part of this story is that you don't need to install a single thing. The browser you're using right now has, built in, one of the most powerful audio tools I've ever seen: the Web Audio API. It doesn't play back a music file — it generates sound, sample by sample, in real time. That's the difference between playing a record and having a band inside the machine.
And when I say "from nothing," I mean it. Sound, in the end, is just air vibrating. On screen, that becomes numbers: thousands of times per second, the computer decides the speaker's position. A sine wave that goes up and down 440 times per second is the orchestra's famous "A." It's just math turning into pressure on your eardrum.
The Lego brick of sound: the oscillator
The heart of it all is the oscillator (OscillatorNode). Think of it as a guitar string that never stops vibrating. You tell it the frequency (in hertz, "vibrations per second") and the shape of the wave, and it produces the pure tone. Frequency is what we perceive as the pitch of the note: low at the bottom, high at the top.
The wave shape is what changes the timbre — the "flavor" of the sound. These are the four classics:
- Sine — the purest, cleanest tone there is, with no seasoning at all. Sounds like a soft whistle or a tuning fork.
- Square — hollow and "retro," the signature of 8-bit video games. It's the sound of a Game Boy.
- Triangle — similar to a sine, but with a little more body, a mellow buzz.
- Sawtooth — the rawest and fullest, packed with harmonics. It's the backbone of most synths you hear in electronic music.
Why a "start audio" button?
There's a technical detail that seems annoying but is actually a kindness. Browsers forbid a page from making noise on its own — imagine opening a site and getting an audio jump-scare. So audio only "wakes up" after your first tap or click. It's called the gesture gate. In the synth below, that's exactly what the power button is for: it unlocks the studio. Small curiosity, big relief for the world's ears.
Two curiosities that floored me
1. The ADSR envelope. When you press a piano key, the sound doesn't pop in and vanish instantly — it is born, shines, and dies following a specific shape. That shape has a name: ADSR (Attack, Decay, Sustain, Release). Attack is how fast the sound rises; an organ has an instant attack, a violin has a slow one. It's a single concept that separates a robotic "beep" from something that sounds like actual music. Move those sliders in the synth below and you'll feel the difference instantly.
2. The pentatonic scale never misses. There's a set of five notes — the pentatonic scale — where any combination you play sounds, at the very least, pleasant. It's nearly impossible to make it sound bad. It's not magic: those notes lack the "tense" intervals that cause dissonance. That's why my synth's generative mode plays random notes from that scale and still feels like there's a musician in there. Chance, with the right rules, becomes beauty.
My honest take
I've worked with the web for a long time and the Web Audio API still surprises me. We associate "browser" with buttons, forms, tables — visual things. But there's a whole sonic universe in there, for free, with zero dependencies. I could have solved this with the Tone.js library, which is excellent, but to truly understand what's going on I'd much rather build it by hand. It's like learning to drive with a manual transmission: more effort, but you feel the machine.
And there's something almost philosophical in all this: the raw material of sound isn't any expensive gear — it's just organized vibration. The coffee machine was already making music that morning; I just needed a button to notice.
Enough talk — make some noise 👇
I built a complete mini-synth, vanilla, running right here on the page. Play the keys with your mouse, your finger, or your computer keyboard (the letters A through J). Switch the waveform, tweak the envelope and the filter, and watch the wave drawn live. If you just want to relax, turn on the generative mode and let it play itself on the pentatonic scale. Hit the power button and have fun.