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

1:48 min

Generating algorithmic music using web components and audio APIs

Chris Heilmann +2 · LIVE

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

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
12 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
about 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
about 2 years ago

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

Sue Quackenbush

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

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

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 25, 2026 · 16:50–17:20

Stage 1

Honey, look! I vibe-coded an OS!

Ian Smith

CTO of LYOS

Ian Smith
Open session

World Congress 2026 North America

September 25, 2026 · 16:50–17:20

Stage 4

Engineering Moneyball: How We Benchmarked Google vs Meta

Jirka Bachel

Co-Founder & CEO

Jirka Bachel
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 6

Beyond the Vibe: Specs, Adversarial Review, and Engineering AI Development that Scales and Ships

Ussama Baggili

Principal, App Modernization & Development, Cloud Engineering & Data Analytics | Anthropic Alliance CTO

Ussama Baggili
Open session

World Congress 2026 North America

September 25, 2026 · 11:40–12:10

Outdoor Stage

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

September 25, 2026 · 11:00–11:30

Outdoor Stage

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Stage 4

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

Michael Yuan, Vivian Hu

Michael Yuan
Vivian Hu

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 • almost 2 years 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 • 12 months ago

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

Chris Heilmann, Daniel Cranney, Marc Duiker

WeAreDevelopers LIVE - The Shape of SVG to Come! thumbnail
59:56
LIVE • 3 months ago

WeAreDevelopers LIVE - The Shape of SVG to Come!

Chris Heilmann, Daniel Cranney, Lionel Péramo

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 • over 2 years ago

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

Chris Heilmann

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.