Building a Browser Pitch Detector (and Reusing It for a Guitar Tuner)
01 · Why this is harder than it looks Every musician has used a phone tuner app. Building one in the browser sounds straightforward: grab the mic, run FFT, show the note. Ship it. Then reality shows up. Browser mic input comes with echo cancellation, noise suppression, and auto-gain control — all useful for video calls, all terrible for pitch detection. AGC in particular will quietly stretch your…
Building a Browser Pitch Detector and Reusing It for a Guitar Tuner reveals the intricacies of creating accurate pitch detection tools in web browsers. The author highlights challenges posed by browser microphone features like echo cancellation and noise suppression which interfere with precise pitch readings. By disabling these settings, the raw audio signal remains clear, leading to more reliable pitch detection.
The core of the tool is a three-layer pipeline: mic input, audio graph, and engine. The mic input passes through a ScriptProcessorNode with a 4096-sample buffer, capturing time-domain audio data essential for accurate pitch detection. The engine utilizes the pitchy library, employing gates for RMS threshold, peak normalization, and clarity bounds to filter out noise and ensure reliable pitch readings.
The display component processes the detected pitch, mapping frequencies to musical notes and calculating cents for precision. It introduces a "held" phase to maintain the last valid note during brief gaps, preventing constant flicker on the display. React components handle the UI, reading the display state at a throttled rate to avoid performance issues.
The architecture allows for easy extension, with the core detection pipeline reusable across different applications like general-purpose pitch detectors and specialized guitar tuners.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.