Every project / Music & Sound
🥁 Beat Maker
A 16-step drum machine. Every sound is synthesized from scratch with code.
- Language
- HTML, CSS & JavaScript
- Level
- Intermediate
- Category
- Music & Sound
What you'll learn
- Web Audio API
- Oscillators & noise
- Precise timing
- Building a grid with loops
- 2D arrays
How it works
- Each instrument is a row of 16 steps in tracks: 1 means play, 0 means rest.
- Every sound is built in sounds.js from oscillators and noise, shaped by filters and volume envelopes. No audio files.
- The sequencer looks slightly ahead on the audio clock and schedules each step early, which keeps the timing tight.
- Tempo is beats per minute, and each step is a quarter of a beat.
Knobs to turn
These settings are near the top of the code. Remix it, change one, and watch what happens. The preview updates as you type.
| Setting | Starts at | File | What it does |
|---|---|---|---|
STEPS | 16 | sequencer.js | steps in the loop (16 = four beats) |
Files
| File | Lines | |
|---|---|---|
index.html | 23 | the page: what shows up |
sequencer.js | 92 | what it does |
sounds.js | 96 | Every drum here is made from scratch: oscillators (pure tones) and noise (static), |
style.css | 87 | how it looks |
Challenges
Each one is a bit harder than the last. Teachers: these make good assignment instructions.
- Make your own beat and change the tempo.
- Change the kick drum's pitch to make it punchier or deeper.
- Add a new row: a cowbell (two square waves at 540 Hz and 800 Hz).
- Let the bass row play different notes on different steps.
- Save your pattern in localStorage so it's there next time.