Remix Library / Music & Sound

Beat Maker

A 16-step drum machine. Every sound is synthesized from scratch with code.

Intermediate HTML · CSS · JavaScript
No account needed: you’ll start as a guest.
read-only · remix to edit
Preview

What you'll learn

  • Web Audio API
  • Oscillators & noise
  • Precise timing
  • Building a grid with loops
  • 2D arrays

Challenges

Remix it, then try these. Each one is a bit harder than the last.

  1. Make your own beat and change the tempo.
  2. Change the kick drum's pitch to make it punchier or deeper.
  3. Add a new row: a cowbell (two square waves at 540 Hz and 800 Hz).
  4. Let the bass row play different notes on different steps.
  5. Save your pattern in localStorage so it's there next time.