Omar Diop

Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner

How do you find a clean musical note in a noisy signal? Discover the algorithm that compares a sound wave to itself to find perfect pitch.

Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
#1about 3 minutes

Building an open source guitar tuner with Javascript

The project was created out of curiosity to understand the mathematics and algorithms behind pitch detection using React and Next.js.

#2about 3 minutes

Understanding the relationship between notes and frequency

Every musical note corresponds to a specific frequency, and an octave represents a doubling of that frequency.

#3about 4 minutes

Comparing different pitch detection algorithms

While Zero Crossing and FFT have limitations with noisy signals, autocorrelation effectively finds repeating patterns to isolate the fundamental frequency.

#4about 1 minute

Accessing microphone audio with browser APIs

The MediaStream API captures microphone input, and the Web Audio API's AnalyserNode provides real-time audio data for processing.

#5about 3 minutes

Setting up the audio processing pipeline

The implementation involves getting the media stream, creating an audio context, connecting an analyzer, and storing the signal in a Float32Array buffer.

#6about 3 minutes

Translating the autocorrelation algorithm into code

The implementation normalizes the audio buffer using Max Absolute Scaling, filters noise with Root Mean Square, and then applies the autocorrelation formula.

#7about 4 minutes

Converting autocorrelated data into a musical note

The fundamental frequency is found by identifying the highest peak in the autocorrelated signal, which is then converted into a note name, octave, and tuning offset.

#8about 2 minutes

Creating the user interface with React

The tuner's indicator is built using the react-gauge-chart library, which visualizes the 'cents off' value as a percentage.

#9about 2 minutes

Exploring future improvements for the tuner

Potential enhancements include adding pre-processing noise filters, implementing complex chord detection, and using more accurate algorithms like YIN.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Articles

View all articles
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.