🎸 Live demo: https://indjoov.github.io/pitchcraft/
⭐ GitHub: https://github.com/indjoov/pitchcraft
Most guitar tuners on the web are black boxes.
You don’t know how they work.
You can’t modify them.
And most of them aren’t open source.
So I built my own.
It’s called PitchCraft — an open-source chromatic tuner that runs entirely in your browser.
No backend.
No external tuning libraries.
Just JavaScript and the Web Audio API.
Why I Built This
I’m a musician and developer.
One day I needed a tuner and opened an online one.
It worked.
But I kept thinking:
Why can’t I see how this works?
So I decided to build one myself.
Completely from scratch.
Inside the browser.
The Crazy Part: Modern Browsers Can Do This
The entire signal chain looks like this:
Microphone → Frequency Detection → Note Calculation → Visual Feedback
Using:
- getUserMedia
- AnalyserNode
- autocorrelation
- equal temperament math
No backend required.
Everything runs locally.
The Core: Pitch Detection in JavaScript
PitchCraft uses an autocorrelation algorithm.
The idea is simple:
The signal is compared with delayed copies of itself.
When the waveform aligns, you’ve found the fundamental frequency.
From there:
- frequency → note
- note → cents deviation
- deviation → visual feedback
All in real time.
Features
PitchCraft currently supports:
- Guitar
- Bass
- Ukulele
- Violin
- Cello
- Banjo
- Mandolin
- Chromatic mode
With adjustable reference tuning:
- 432 Hz
- 435 Hz
- 438 Hz
- 440 Hz
- 442 Hz
- 444 Hz
It also includes:
- real-time cents meter
- frequency display
- reference tone playback
- live volume indicator
Accessibility Matters
Most music tools ignore accessibility.
PitchCraft includes:
- high contrast mode
- large text mode
- reduced motion mode
- keyboard navigation
- screen reader support
- semantic HTML
Creative tools should be usable by everyone.
Tech Stack
Built with:
- React
- Vite
- Web Audio API
- pure JavaScript pitch detection
No external tuning libraries.
Everything is open source.
Why Open Source
I believe creative tools should be:
- transparent
- hackable
- shareable
PitchCraft is MIT licensed.
You can use it, fork it, and improve it.
What I Learned
Three surprising things:
1. The browser is extremely powerful
You can build real audio tools with it.
2. Signal processing is more accessible than expected
Basic math goes a long way.
3. Open source builds trust
People want to see how things work.
Try It Yourself
Live demo:
https://indjoov.github.io/pitchcraft/
Source code:
https://github.com/indjoov/pitchcraft
Feedback Welcome
I’d love feedback from:
- developers
- musicians
- accessibility advocates
What would you add?
Final Thought
The browser is no longer just a document viewer.
It’s becoming a creative platform.
PitchCraft is a small example of that shift.
Top comments (0)