I Built a Drum Machine in the Browser With Zero Audio Files

May 1, 2026

Most web developers never touch audio. We build forms, fetch data, render lists. But the browser has a full-blown audio synthesis engine built in, and it's incredible.

The Web Audio API

The Web Audio API lets you:

  • Generate sounds from scratch using oscillators (sine, square, sawtooth, triangle waves)
  • Shape sounds with gain nodes, filters, and envelopes
  • Schedule audio precisely — way more accurate than setTimeout
  • Analyze audio with FFT for visualizations
  • Process audio in real-time with custom nodes

It's not a toy. Professional music apps like Soundtrap and BandLab use it.

What I Built

A 16-step drum machine with 8 instruments — all synthesized in real-time:

  • Kick — low frequency sine wave with a pitch envelope
  • Snare — noise burst mixed with a tone, shaped with a fast decay
  • Hi-hat (closed) — filtered noise with a very short envelope
  • Hi-hat (open) — same as closed but with a longer decay
  • Clap — layered noise bursts with slight delays
  • Tom — sine wave with medium pitch envelope
  • Rim — short high-frequency triangle wave burst
  • Cowbell — two detuned square waves with a band-pass filter

Every sound is generated mathematically. No .mp3 or .wav files. The entire instrument is JavaScript running in your browser.

Technical Challenges

Timing

You can't use setInterval for music — it drifts and jitters. Instead, you use the Web Audio API's own clock (audioContext.currentTime) which is hardware-accurate. I use a "look-ahead scheduler" that schedules notes slightly ahead of time.

State Management

A sequencer grid is essentially an 8×16 boolean matrix that changes on every click. React re-renders need to be fast, so I keep the audio scheduling logic outside of React's render cycle using refs.

Synthesis

Making a kick drum sound good requires:

  1. Start a sine oscillator at ~150Hz
  2. Sweep the frequency down to ~40Hz in ~100ms (the "punch")
  3. Apply a gain envelope that decays over ~300ms
  4. Add slight distortion for character

Each instrument has its own synthesis recipe. Getting them to sound decent took more time than the entire UI.

Features

  • 16-step sequencer with visual playhead
  • 8 fully synthesized instruments
  • BPM control (60-200) with tap tempo
  • Swing control for groove
  • Per-track volume and mute/solo
  • Pattern presets
  • All client-side, zero dependencies

Check it out: Drum Machine

Takeaway

The Web Audio API is a gateway to a completely different kind of web development. If you're bored of CRUD apps, try making some noise.