An offline-first drum practice workstation with 571 curated patterns,
adaptive sessions, multi-voice sequencing and precise Web Audio playback.
Open the live app · Features · Development · Deutsch
drumgrid combines a drum machine, metronome and adaptive practice coach in one installable web app. It is designed for focused practice without accounts, telemetry or a permanent network connection. Patterns, favorites, scenes and practice history stay on the device.
The library covers groove vocabulary from jazz, funk and hip-hop to metal, jungle, reggae, Latin styles and electronic music. It contains 202 MIDI-derived Radiohead groove variants from 86 songs across all nine studio-album eras plus 89 source-marked artist studies, including focused collections for Limp Bizkit, Porcupine Tree and Steven Wilson. Source-based song exercises are marked as reductions or reconstructions rather than presented as exact transcriptions.
| Area | Included |
|---|---|
| Pattern library | 571 curated drum patterns, multi-bar forms, search, style families, learning filters and favorites |
| Sequencer | Kick, snare, hats, cymbals, rim and tom lanes with accents, ghost notes and per-voice volume |
| Timing | Stable Web Audio scheduler, 20–300 BPM, tap tempo, meter, subdivisions, swing, English/German spoken counting and original-feel microtiming |
| Practice | Free sessions, timing and groove sessions, tempo pyramids, gap click, random gaps, voice dropout and call-and-response |
| Feedback | Optional microphone transient analysis, timing markers, session recap and manual or measured latency correction |
| Sounds | Eleven compact sample kits plus a complete procedural precision kit |
| Personal data | Local scenes, custom patterns, recent items, practice history and JSON backup/import |
| Interface | German and English UI, Winamp and Studio layouts with five colorways each, density and scale controls, reduced motion, high contrast and an optional floating desktop transport |
| PWA | Installable, offline-capable, atomic service-worker updates, kit download status and mobile safe-area navigation |
The control-surface menu separates visual preferences from musical settings. Choose Winamp for compact retro windows or Studio for side navigation, a large tempo control beside the pattern and quiet, flat surfaces. Winamp offers Signal, Ultraviolet, Ember, Glacier and Mono. Studio offers Chalk (cream/red), Sage, Tide, Plum and Ink (dark graphite/sand). Each layout remembers its colorway; changing appearance preserves the running session, pattern and sound. Existing installations keep their Winamp settings.
Adjust UI scale and density, hide the coach or spectrum, and place the floating play/pause transport on the left, center or right of the desktop. Both layouts adapt to mobile screens and include the pattern library, saved grooves and interface dialogs.
Keyboard controls:
| Key | Action |
|---|---|
Space |
Start or pause playback |
T |
Tap tempo |
+ / - |
Change tempo by one BPM |
- No account and no analytics
- No audio upload; microphone analysis stays in the current browser session
- Favorites, scenes, presets and results are stored in IndexedDB
- Backups can be exported and imported as JSON
- UI preferences are stored separately on the device
Requirements: Node.js 22.13 or newer.
npm install
npm run devThe local app is served at http://localhost:3000.
npm run typecheck
npm run lint
npm testnpm test creates a production build and runs the complete Node test suite. The catalog generator and its research material live under research/drum-patterns.
npm run buildThe production build targets Cloudflare Workers. NEXT_PUBLIC_SITE_URL can override the public base URL used for metadata.
Live deployment: drumgrid.ricke-schwaene-0f.workers.dev
Every push to main now builds and deploys the Worker through GitHub Actions. In the repository settings, add these Actions secrets once under Settings → Secrets and variables → Actions:
CLOUDFLARE_API_TOKEN— an API token with Workers Scripts: Edit permissionCLOUDFLARE_ACCOUNT_ID— the Cloudflare account ID that owns the Worker
After that, a push to main publishes the current GitHub version automatically. The workflow can also be started manually from the Actions tab.
app/ React UI, audio engine and local data layer
public/audio/drums/ Compact drum-kit assets
public/audio/counting/ English and German spoken count syllables
public/data/ Generated production pattern catalog
research/drum-patterns/ Reviewed sources and catalog generation data
scripts/ Manifest and catalog generators
tests/ Audio, catalog, PWA and rendered-UI checks
drumgrid ist eine installierbare, offlinefähige Drum-Übungsstation mit 571 kuratierten Patterns, darunter 26 Technikübungen und 60 gestufte Fills von leicht bis schwer. Hinzu kommen 202 MIDI-basierte Radiohead-Groovevarianten aus 86 Songs sowie 89 quellenmarkierte Künstlerstudien. Die App verbindet Mehrspur-Sequencer, stabiles Metronom, adaptive Übemodi, optionale Timing-Analyse und lokale Fortschrittsdaten. Bedienoberfläche, Themes und Desktop-Transport lassen sich im Interface-Menü anpassen; die UI steht auf Deutsch und Englisch zur Verfügung.
Die App benötigt kein Konto und sendet weder Übedaten noch Mikrofonaufnahmen an einen Server.