I Replaced My Guitar Tuner With 200 Lines of JavaScript

Source: Dev.to

I Built an Open-Source Guitar Tuner That Runs Entirely in Your Browser (No Libraries, No Backend)

Most guitar tuners on the web are black boxes—you don’t know how they work, you can’t modify them, and almost none are built with accessibility in mind. So I built my own: PitchCraft, an open‑source chromatic tuner that runs entirely in the browser using the Web Audio API. No backend, no tracking, no external tuning libraries—just signal processing and math.

Live demo:
GitHub:

The Moment That Triggered It

I’m a musician and developer. One day I needed a simple tuner, opened a popular web tuner, and thought, “Why does this feel like magic I can’t see inside?” That question became PitchCraft.

The Crazy Part: The Browser Is Enough

Modern browsers can do real‑time pitch detection. The pipeline is simple:

Microphone → Frequency → Note → Visual Feedback

It uses:

• getUserMedia
• AnalyserNode
• Autocorrelation
• Equal temperament math

No server is needed.

Core: Autocorrelation Pitch Detection

The tuner detects periodicity in the waveform by comparing the signal with delayed versions of itself. When the signal aligns, the delay corresponds to the fundamental frequency, which is then converted to:

• Frequency → Note → Cents deviation

All in real time, the same principle used in professional tuners.

Accessibility

Accessibility matters to me. PitchCraft includes:

• High‑contrast mode
• Large‑text mode
• Reduced‑motion mode
• Full keyboard navigation
• Screen‑reader support

Creative tools should be usable by everyone.

Supported Instruments

• Guitar
• Bass
• Ukulele
• Violin
• Cello
• Banjo
• Mandolin

Chromatic mode with adjustable reference tuning (e.g., 432 Hz → 444 Hz).

Built With

• React
• Vite
• Web Audio API
• Pure JavaScript pitch detection (no external tuning libraries)

Everything runs locally.

The Hardest Part

Not the math, not React—the hardest part was making it feel good: low latency, stable detection, and clear feedback. That required the most iteration.

Why I Open‑Sourced It

Creative tools should be transparent. You should be able to understand, modify, and improve them—not just consume them.

Code Size

The entire tuner logic lives in one core component. Signal processing in JavaScript is more accessible than many think, and the browser is a powerful DSP environment.

Try It Yourself

• Live:
• Source:

What I Learned Building This

1. The Web Audio API is insanely powerful.
2. You can build real music tools in the browser.
3. Signal processing isn’t as scary as it seems—basic math gets you far.
4. Accessibility isn’t hard; you just have to care about it.

Roadmap

• MIDI input
• Strobe tuner mode
• Drop tunings
• PWA offline mode

I’d Love Feedback

Especially from:

• Musicians
• Audio developers
• Accessibility developers

What would you improve?

Why This Matters

We’re entering a time where the browser is becoming a creative instrument, not just a document viewer. PitchCraft is a small example of that shift.