Forem: Niki Indjov

I Built a Drum Tuner That Vibrates When You’re Out of Tune

Niki Indjov — Fri, 20 Feb 2026 08:11:28 +0000

🥁 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.

I Replaced My Guitar Tuner With 200 Lines of JavaScript

Niki Indjov — Fri, 20 Feb 2026 07:14:32 +0000

🎸 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.