Drum Notation Reader - Online Percussion Staff Player

Drum notation uses a standard 5-line staff where each line or space represents a different percussion instrument. On this tool, Kick (Bass Drum) sits at the bottom, Snare on the middle line, and cymbals like Hi-Hat & Crash appear at the top with X-shaped noteheads. Click on the staff or use the grid below to place notes, then press play to hear them.

Yes! The BPM slider lets you change tempo from 40 to 220 BPM in real-time — even during playback. The playback engine adjusts immediately. The current BPM is displayed prominently next to the slider for quick reference.

Round filled noteheads represent drums (Kick, Snare, Toms). X-shaped noteheads represent cymbals (Hi-Hat, Crash, Ride). This follows standard percussion notation conventions. Each instrument type is color-coded for easier identification.

This tool uses Web Audio API synthesis to generate drum sounds in real-time. While not sampled from acoustic drums, the synthesized sounds are carefully tuned — Kick uses a frequency-swept sine wave for deep thump, Snare blends noise with a tonal body, and cymbals use filtered noise bursts. The result is surprisingly realistic and great for practice and composition sketching.

Currently the tool works as a live editor and player. You can bookmark the page after creating a pattern — all note data is preserved in the browser session. For exporting, you can screenshot the staff view or use the grid as a visual reference. Full MIDI export may be added in a future update.

Each column represents a 16th note in a single 4/4 measure. Four columns make one beat. Beat 1 starts at column 1, Beat 2 at column 5, Beat 3 at column 9, and Beat 4 at column 13. This gives you fine-grained control over rhythm — perfect for creating syncopated grooves, fills, and complex patterns.