Omar Diop
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.
tree-IT GmbH
Bad Neustadt an der Saale, Germany
€54-80K
Intermediate
Senior
Java
TypeScript
+1
Matching moments
16:40 MIN
Building music sequencers with the Web Audio API
New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
03:58 MIN
A modern look at HTML tables and JavaScript dates
WeAreDevelopers LIVE - SpeculAItions
11:20 MIN
A tour of creative code demos and useful developer tools
WeAreDevelopers LIVE – PHP Is Alive and Kicking and More
14:22 MIN
Creative web tech for music notation and modern CSS
WeAreDevelopers LIVE - Dapr / Pixels and Generative Art / Open Source and Communities / and more
02:54 MIN
A career journey and an interactive game demo
Fun with PaaS – How to use Cloud Foundry and its uniqueness in creative ways
07:06 MIN
A career journey from professional musician to tech
Fingerboard to Keyboard: Transposing One Profession to Another
02:28 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
02:31 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
Featured Partners
Related Videos
25:30The year 3000, a brief history of Web Development
Lorenzo Pieri
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
27:27Things I learned while writing high-performance JavaScript applications
Michele Riva
32:56Web development: where are we, and where are we going?
Laurie Voss
27:01The Journey of a Pixel in a React Application
Shem Magnezi
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
42:081, 2, 3... Fastify!
Matteo Collina
32:54Beats in the Browser: Coding Music with JavaScript
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Fraunhofer-Gesellschaft
Erlangen, Germany
C++
Python
Docker
Android