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:

• 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 dev

Open http://localhost:5173 in your browser.

npm run build

drumcraft/
├── 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

1. Select your drum type, size, and head (batter or resonant)
2. Set your target frequency using the slider
3. Tap a lug on the interactive drum head diagram
4. Start the tuner and strike your drum near that lug
5. Record the reading — DrumCraft saves it and shows deviation
6. Work around the head (star pattern recommended) until all lugs are even
7. 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