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.
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
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
02:59 MIN
Audience Q&A on patterns, typescript, and frameworks
10 must-know design patterns for JS Devs
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
08:03 MIN
Exploring modern tools for web interaction and analysis
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
Featured Partners
Related Videos
27:27Things I learned while writing high-performance JavaScript applications
Michele Riva
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
25:30The year 3000, a brief history of Web Development
Lorenzo Pieri
27:01The Journey of a Pixel in a React Application
Shem Magnezi
32:56Web development: where are we, and where are we going?
Laurie Voss
42:081, 2, 3... Fastify!
Matteo Collina
26:44Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
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.
Tech Solutions Gmbh
GIT
HTML
Vue.js
Tech Solutions Gmbh
GIT
HTML
Vue.js
Tech Solutions Gmbh
GIT
HTML
Vue.js