🥁 Live demo: https://indjoov.github.io/drumcraft/
⭐ GitHub: https://github.com/indjoov/drumcraft
Drum tuning is one of the most frustrating things in music.
Unlike guitars, drums don’t have one string.
They have 8 separate tension points around the head.
And each one needs to match.
Most tuners don’t help with this.
So I built one that does.
And I added something unusual:
Haptic feedback.
Your phone vibrates when you're out of tune.
You can literally feel the pitch.
I call it DrumCraft.
An open-source, accessible drum tuner that runs entirely in the browser.
No backend. No installs.
Just your mic and your phone.
Why Drum Tuning Is Harder Than Guitar Tuning
When you tune a guitar string, you tune one thing.
When you tune a drum, you're tuning a system.
Each lug affects the others.
You don’t tune notes — you tune tension symmetry.
If one lug is tighter, the drum sounds uneven.
That’s why professional drummers go lug by lug.
DrumCraft was designed specifically for that.
The Key Idea: Tune Each Lug Individually
DrumCraft shows a visual drum.
You click a lug.
You strike near that lug.
It measures the frequency.
Then you repeat for all lugs.
It calculates:
- average frequency
- deviation
- spread between lugs
This tells you exactly which lug needs adjustment.
The Weird Feature: Haptic Feedback
This is the part I love most.
DrumCraft uses the browser’s Vibration API.
Your phone vibrates differently depending on tuning accuracy.
Out of tune → stronger vibration
In tune → calm
This creates a second channel of feedback.
Not visual.
Not audio.
Physical.
This is especially powerful for:
- noisy environments
- live stages
- accessibility
- low-vision users
You can tune without constantly looking at the screen.
How It Works (Technically)
The system uses the Web Audio API.
Flow:
Microphone → Autocorrelation → Frequency → Visual + Haptic feedback
Steps:
- Microphone input via
getUserMedia - Audio analysis via
AnalyserNode - Autocorrelation detects fundamental frequency
- Frequency compared to average lug frequency
- Deviation calculated
- Visual + vibration feedback generated
All in real time.
No external audio libraries.
Everything runs locally.
Accessibility Was a Core Goal
DrumCraft includes:
- High contrast mode
- Large text mode
- Reduced motion mode
- Full keyboard navigation
- Screen reader support
- Haptic feedback
Accessibility is not an afterthought.
It’s part of the design.
Why Build This in the Browser?
Because modern browsers are incredibly powerful.
You can build real musical tools with:
- JavaScript
- Web Audio API
- no backend
This makes tools:
- instant
- open
- accessible
Anyone can use them.
Anyone can improve them.
Open Source
DrumCraft is MIT licensed.
You can:
- fork it
- modify it
- improve it
GitHub:
https://github.com/indjoov/drumcraft
The Bigger Idea
The browser is becoming a musical instrument.
Not just something you use to browse.
Something you create with.
Something you interact with physically.
DrumCraft is a small step in that direction.
Try It
Live demo:
https://indjoov.github.io/drumcraft/
GitHub:
https://github.com/indjoov/drumcraft
I’d Love Feedback
Especially from:
- drummers
- developers
- accessibility engineers
What would you improve?
And if you found it interesting, consider starring the repo ⭐
Thanks for reading.
Top comments (0)