
Building a Chromatic Tuner in the Browser with the Web Audio API
I play guitar and I used to carry a clip-on tuner. Then I realized that my phone has a microphone, a fast processor, and a screen. Everything a tuner needs. The browser has the Web Audio API, which gives JavaScript direct access to the microphone and real-time audio analysis. Building a chromatic tuner is one of the most satisfying browser projects because the feedback loop is instant and physical. How pitch detection works A chromatic tuner does one thing: listen to a sound and determine its fundamental frequency in Hz. The mapping from frequency to note is: A4 = 440 Hz Each semitone up: frequency * 2^(1/12) Each semitone down: frequency * 2^(-1/12) Each octave up: frequency * 2 The 12th root of 2 (approximately 1.05946) is the frequency ratio between adjacent semitones in equal temperament tuning. This means: A4 = 440.00 Hz A#4 = 466.16 Hz B4 = 493.88 Hz C5 = 523.25 Hz ... To determine which note a frequency corresponds to: function frequencyToNote ( freq ) { const semitones = 12 * M
Continue reading on Dev.to Beginners
Opens in a new tab




