π₯ Online Drum Machine
16-step sequencer with synthesized drums. Click steps, press play.
Sequencer status
How to Use This Drum Machine
Click any step in the grid to toggle a drum hit on or off, then press Play. The highlighted column shows the playhead moving through the 16 steps in a loop. Adjust the tempo slider, add swing for groove, or load a preset pattern to start from a classic groove and make it yours.
Pick a preset (Rock, Hip-Hop, House, Techno, Trap) or start Blank. Each preset loads a genre-typical pattern and tempo: house gives you four-on-the-floor kick at 124 BPM, boom-bap gives you the swung hip-hop bounce at 92.
Click steps to add or remove hits. Steps are grouped in fours so you can see the beats: steps 1, 5, 9, and 13 are the downbeats of each quarter note. A kick on all four downbeats with hats on every step is instant house.
Set the tempo with the slider or type an exact BPM. Add swing to loosen straight patterns: 10 to 20 percent for a subtle groove, 40-plus for heavy hip-hop shuffle.
Press Play and jam. Everything edits live while the sequencer runs, so you can build a beat in real time by toggling steps as the loop cycles. Press Stop (or Play again) to halt.
How the Sounds Are Synthesized
Real drum synthesis starts with an oscillator or a noise buffer shaped by envelopes. The kick is a sine wave whose pitch falls exponentially from 160 Hz to 45 Hz in about a tenth of a second, mimicking a beater striking a drumhead, with the volume decaying over 0.28 seconds. The snare layers a burst of white noise through a bandpass filter around 1800 Hz (the wires) over a short 190 Hz tone (the shell). Hi-hats are pure highpassed noise: identical recipes with different decay times make the closed and open variants.
Timing uses the standard lookahead scheduler: a timer fires every 25 milliseconds and schedules any notes falling in the next 120 milliseconds against the audio clock, which is sample-accurate. That is why the groove stays rock solid even if the browser tab stutters visually. Swing is applied per-step by lengthening on-beat sixteenths and shortening off-beat ones by the swing percentage, keeping the total bar length constant so the tempo never drifts.
Worked Example
Build a basic rock beat from the Blank preset at 110 BPM. Put the kick on steps 1 and 9 (beats 1 and 3), the snare on steps 5 and 13 (beats 2 and 4, the backbeat), closed hats on all 16 steps, and a clap layered with the snare on 5 and 13 for extra crack. Press Play: you have the foundation of thousands of rock and pop songs, and the playhead lighting up steps 5 and 13 shows you exactly where the backbeat lands.
Now morph it into house: move the kick to steps 1, 5, 9, 13 (four on the floor), keep the clap on 5 and 13, move closed hats to the off-beats (steps 3, 7, 11, 15), and add an open hat on step 15. Raise the tempo to 124 and add 12 percent swing. Same five sounds, completely different genre, which demonstrates how much of "genre" lives in the pattern grid rather than the drum sounds.
Practical Tips
Less is more with drum programming. Beginners tend to fill every step, but the best grooves leave space: try removing half your hi-hats and moving the survivors to off-beats. Ghost notes (extra quiet hits) are not available here since every step is full velocity, so create dynamics by deleting hits instead of adding them.
Use the open hat as an accent, not a constant: one open hat at the end of a bar (step 15 or 16) creates forward motion into the next loop. Layer the clap exactly on snare steps for modern pop and hip-hop punch, and offset it by one step late for a loose, live-room feel. When a pattern feels stiff, add 8 to 15 percent swing before changing anything else; timing groove fixes more than new sounds do.
Frequently Asked Questions
How does this drum machine make sounds without audio files?
Every sound is synthesized live with the Web Audio API. The kick is a sine wave with a pitch drop, the snare and hats are filtered noise bursts, and the clap is a stack of short noise hits. Because nothing is sampled, the machine loads instantly and works offline once the page is open.
What is a 16-step sequencer?
A 16-step sequencer divides one bar of 4/4 time into 16 sixteenth-note slots. Each row is a drum sound and each lit step triggers that sound when the playhead reaches it. It is the same grid workflow made famous by the Roland TR-808 and TR-909.
What does the swing control do?
Swing delays the off-beat sixteenth notes, pushing straight patterns toward a shuffle feel. At 0 percent every step is perfectly even; around 50 percent you get a hard swing like classic hip-hop. Small amounts, 10 to 20 percent, add human groove to house and pop patterns without sounding drunk.
Why is there no sound when I press play?
Browsers block audio until you interact with the page, so the AudioContext starts on your first click of Play. If it is still silent, check that your device volume is up, nothing is muted in the browser tab, and no other app has exclusive control of your audio output.
Can I use these patterns in my own music?
Yes. The preset patterns are classic, public-domain-style grooves (four-on-the-floor, boom-bap, and so on) that no one owns, and anything you program yourself is yours. To capture the audio, route your system audio into a recorder or DAW while the pattern plays.
What BPM should I use for different genres?
Use these starting points: hip-hop 80 to 100, house 120 to 128, techno 128 to 140, drum and bass 170 to 180, trap 130 to 150 (felt in half time). The presets load with genre-typical tempos so you can hear the difference immediately.