An open-source, accessible drum tuning app for the web.
DrumCraft is a modern, browser-based drum tuner built with React. It provides lug-by-lug tuning guidance with a visual drum head diagram, frequency analysis, and haptic feedback — all running entirely in your browser with zero backend required.
Part of the Craft Audio family alongside PitchCraft.
Each drum includes a custom SVG illustration and tuning range:
| Drum | Lugs | Batter Range | Resonant Range | Sizes |
|---|---|---|---|---|
| Snare | 8 | 220–330 Hz | 280–420 Hz | 13", 14" |
| Bass Drum | 8 | 55–90 Hz | 60–100 Hz | 18", 20", 22", 24" |
| Rack Tom | 6 | 140–240 Hz | 160–280 Hz | 10", 12", 13" |
| Floor Tom | 8 | 80–160 Hz | 90–180 Hz | 14", 16", 18" |
| Hi-Hat | 6 | 300–500 Hz | 330–550 Hz | 13", 14", 15" |
- Interactive drum head diagram showing all lug positions
- Tap a lug to select it, then strike your drum to measure
- Record readings for each lug and track evenness across the head
- Color-coded feedback: green (on target), yellow (close), red (off)
- Spread analysis showing the Hz difference between highest and lowest lugs
- Autocorrelation-based frequency detection via the Web Audio API
- Visual deviation meter showing how far you are from target
- Adjustable target frequency with a slider for each drum/head combination
- Live volume indicator
- Vibration patterns indicate tuning accuracy on supported devices
- Short pulse = on target, medium pattern = close, long pattern = needs adjustment
- Critical for deaf and hard-of-hearing drummers
- High Contrast Mode — increased contrast for low-vision users
- Reduced Motion Mode — disables all animations
- Large Text Mode — scales text up 25%
- Full keyboard navigation — every lug and control is tab-accessible
- Screen reader support — ARIA roles, labels, and live regions throughout
- Haptic feedback — vibration-based tuning cues via the Vibration API
- Built-in tips for each drum type
- Guidance on batter vs. resonant head relationships
- Size-specific frequency recommendations
- Node.js v18 or later
- npm or yarn
# Clone the repository
git clone https://github.com/indjoov/drumcraft.git
cd drumcraft
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:5173 in your browser.
npm run builddrumcraft/
├── public/
├── src/
│ ├── App.jsx
│ ├── drumcraft-tuner.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── package.json
├── vite.config.js
├── LICENSE
├── CONTRIBUTING.md
└── README.md
- React — UI framework
- Vite — Build tool and dev server
- Web Audio API — Microphone input and pitch detection
- Vibration API — Haptic feedback for accessibility
- No external audio libraries — all detection built from scratch
- Select your drum type, size, and head (batter or resonant)
- Set your target frequency using the slider
- Tap a lug on the interactive drum head diagram
- Start the tuner and strike your drum near that lug
- Record the reading — DrumCraft saves it and shows deviation
- Work around the head (star pattern recommended) until all lugs are even
- Haptic feedback tells you how close you are without looking at the screen
- Star pattern guide (suggested lug order for even tuning)
- Preset tuning recipes (jazz, rock, funk, etc.)
- Save/load tuning sessions
- Frequency spectrum visualization
- Side-by-side batter/resonant comparison
- PWA support for offline use
- MIDI trigger support
- Localization / i18n
Contributions are welcome! Please read our Contributing Guide for details.
MIT License — see LICENSE for details.
- PitchCraft — Open-source accessible chromatic tuner
Made with 🥁 by indjoov and the DrumCraft community