What this tool does
This drum machine lets you program rhythmic patterns directly in your browser using a 16-step sequencer grid. Toggle individual steps on or off for four synthesized drum sounds -- Kick, Snare, Hi-Hat, and Clap -- and hear your beat loop in real time.
All sounds are generated using the Web Audio API, so nothing needs to be downloaded or installed. Just click, play, and experiment.
How it works
**Timing formula:** \`\`\` Step Interval = 60,000 ms / BPM / 4 \`\`\`
**Where:** - **BPM** = beats per minute (quarter notes) - **4** = number of 16th-note subdivisions per beat - **Step Interval** = milliseconds between each grid column
At 120 BPM, each step fires every 125 ms. At 60 BPM, every 250 ms. The sequencer cycles through all 16 steps and loops continuously.
The four drum sounds
- **Kick**: A sine-wave oscillator starting at 150 Hz with a rapid pitch sweep down to 30 Hz, creating the deep thump of a bass drum. - **Snare**: A combination of filtered white noise (bandpass at 3 kHz) and a short triangle-wave tone body, simulating the crack and rattle of a snare drum. - **Hi-Hat**: High-pass filtered noise (7 kHz cutoff) with a very short decay, producing the tight, metallic tick of a closed hi-hat. - **Clap**: Three rapid-fire noise bursts with bandpass filtering, layered 10 ms apart to mimic the slightly spread timing of a real handclap.
Who should use this
- **Music producers**: Sketch out beat ideas before committing them to a DAW - **Beginners**: Learn the fundamentals of rhythm programming and beat structure - **Educators**: Demonstrate how drum patterns are built step by step - **Anyone**: Just have fun making beats in your browser
How to use
1. Click cells in the grid to activate drum hits for each step 2. Adjust the tempo slider to set your desired BPM (60 to 200) 3. Press Play to hear your pattern loop 4. Edit the pattern while it plays to experiment in real time 5. Press Clear to reset all steps and start fresh
Tips for good patterns
- Place the **kick** on beats 1 and 3 (steps 1 and 9) for a basic four-on-the-floor feel - Add the **snare** on beats 2 and 4 (steps 5 and 13) for a standard backbeat - Use **hi-hats** on every other step (or every step) to add movement - Sprinkle in a **clap** to accent or replace the snare on certain beats - Syncopation (placing hits between the main beats) adds groove and interest
FAQs
**Q: Why can I not hear any sound?** A: Most browsers require a user interaction (like clicking Play) before audio can start. Make sure your volume is up and check that your browser allows audio playback on this page.
**Q: Can I save my patterns?** A: Currently patterns exist only during your session. You can recreate them quickly since the grid is simple to set up.
**Q: Does this work on mobile?** A: Yes. The grid is responsive and touch-friendly. Tap cells to toggle them, then tap Play.
**Q: How many steps are there?** A: The sequencer has 16 steps, representing one bar of 16th notes in 4/4 time.
Explore Similar Tools
Explore more tools like this one:
- Online Metronome — A precise, adjustable click track for musicians. Set... - BPM Counter — Tap to the beat to instantly measure Beats Per Minute... - Audio File Size Estimator — Estimate file size for audio recordings based on format,... - Audio Visualizer — Real-time audio visualizations from files or microphone... - Video to MP3 Converter — Extract audio from video files instantly. Convert MP4,...