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
56:55 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
00:02 MIN
A career journey and an interactive game demo
Fun with PaaS – How to use Cloud Foundry and its uniqueness in creative ways
25:14 MIN
Audience Q&A on patterns, typescript, and frameworks
10 must-know design patterns for JS Devs
01:28 MIN
A career journey from professional musician to tech
Fingerboard to Keyboard: Transposing One Profession to Another
30:26 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
00:03 MIN
An overview of the 2021 web developer survey
Web development best practices in 2021
09:53 MIN
Simplifying audio playback in the browser with Tone.js
Beats in the Browser: Coding Music with JavaScript
06:58 MIN
Creating basic sounds with the Web Audio API
Beats in the Browser: Coding Music with JavaScript
Featured Partners
Related Videos
The year 3000, a brief history of Web Development
Lorenzo Pieri
Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
Things I learned while writing high-performance JavaScript applications
Michele Riva
Web development: where are we, and where are we going?
Laurie Voss
The Journey of a Pixel in a React Application
Shem Magnezi
Next.js Unleashed: Optimizing Web Vitals for superior User Experience
Eileen Fürstenau
1, 2, 3... Fastify!
Matteo Collina
Beats 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.

![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL

Founding Engineer - React Native, Typescript
MathGPT
Canton d'Eu, France
Remote
€100-150K
API
TypeScript
React Native


Fullstack Web Software Entwickler Angular / NestJS
Fusonic GmbH
Remote
€60-80K
NestJS
Angular
JavaScript
+1

Softwareentwickler Angular
4k analytics
4k analytics
Leipzig, Germany
DevOps
Python
Gitlab
Docker
Angular
+2


