WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 • Aug 20, 2024 • Session details

Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner

Omar Diop

Deep digital signal processing doesn't require a backend or AI. Learn how to build a highly accurate web-based guitar tuner using React, auto-correlation, and raw math.

Pause
Mute Enter Fullscreen
#1 about 4 min

Building an open-source react guitar tuner

The motivation and technological stack behind building a browser-based, open-source guitar tuner application.

#2 about 3 min

Foundational music theory for pitch detection

Understanding how musical notes correspond to frequencies and octaves for audio analysis.

#3 about 2 min

Pitch detection using the zero crossing algorithm

Why counting the number of times a noisy guitar signal crosses the zero line is often insufficient.

#4 about 2 min

Applying fast fourier transform to guitar signals

Why transforming time domains into frequency domains struggles to isolate fundamental frequencies amid complex guitar harmonics.

#5 about 2 min

Using autocorrelation to filter noise and find pitch

How autocorrelation isolates the fundamental frequency of a repeating pattern by comparing it with a shifted copy.

#6 about 2 min

Accessing microphones with native web APIs

Retrieving real-time local audio streams using the MediaStream API and processing them via the AudioContext.

#7 about 5 min

Structuring the audio processor in typescript

How to initialize an audio context analyzer node and buffer real-time float variations for frequency computation.

#8 about 6 min

Normalizing signals and calculating tonal offsets

Applying absolute scaling, root mean square noise filtering, and converting detected frequencies into human-readable MIDI notes.

#9 about 2 min

Rendering real-time pitch data in react

How to render precision tuning data using a dynamic gauge chart component and vanilla extract styling.

#10 about 3 min

Future algorithms for chord detection and noise filtering

Exploring advanced topics like algorithmic chord detection and the YIN algorithm for future project iterations.

Matching moments

4:24 min

Building synthesizers and music sequencers using web audio APIs

Chris Heilmann +2 · LIVE

6:12 min

Rendering complex musical notation in the browser using HTML

Chris Heilmann +2 · LIVE

2:30 min

Synthesizer karaoke and final presentation wrap up

Rowdy Rabouw Rowdy Rabouw · LIVE

2:53 min

Developing custom music applications and open source browser plugins

Chris Heilmann +2 · LIVE

3:30 min

Exploring esoteric programming languages and unconventional input methods

Chris Heilmann +2 · LIVE

2:47 min

Building greenfield projects with AI code generation

Perf + AI

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
10 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, Jürgen Müller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
almost 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
almost 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
almost 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Vivian Hu, Michael Yuan

Vivian Hu
Michael Yuan
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

Related videos

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Beats in the Browser: Coding Music with JavaScript thumbnail
32:54
LIVE • over 1 year ago

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

WeAreDevelopers LIVE - Dapr / Pixels and Generative Art / Open Source and Communities / and more thumbnail
1:11:09
LIVE • 11 months ago

WeAreDevelopers LIVE - Dapr / Pixels and Generative Art / Open Source and Communities / and more

Chris Heilmann, Daniel Cranney, Marc Duiker

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more thumbnail
1:02:33
LIVE • about 1 year ago

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more

Chris Heilmann, Daniel Cranney, Elena Torró

Catching up on the basics you don't really need that much code thumbnail
14:44
LIVE • about 2 years ago

Catching up on the basics you don't really need that much code

Chris Heilmann

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more thumbnail
1:06:20
LIVE • 9 months ago

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney, Jan Deppisch

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.