Behind the Build: The Tech That Makes Cadence Listen

One of the most magical things about using Cadence is the moment it hears you play your instrument and shows you—instantly—whether you're in tune. It feels effortless, but behind that simple, real-time feedback is a fascinating stack of modern web technology.

So, how do we make a website listen and understand music? Let's pull back the curtain.

The Core Challenge: Real-Time Audio Processing in a Browser

Traditionally, analyzing audio required specialized desktop software. The web browser was simply not equipped to handle such an intensive task. However, the advent of powerful web APIs has changed the game.

The key technology that powers Cadence is the Web Audio API. This is a high-level JavaScript API that allows developers to process and synthesize audio directly in the browser. It gives us the tools to take raw audio data from your microphone and make sense of it.

Step 1: Accessing the Microphone

The first step is to ask for permission to use your device's microphone. This is done securely through the browser using the navigator.mediaDevices.getUserMedia() method. You’ve likely seen this prompt before—it’s the browser ensuring that no website can listen in without your explicit consent.

Once you grant permission, we receive a live audio stream. This stream is like a continuous river of data representing the sound waves captured by your mic.

Step 2: Analyzing the Frequency

Now for the fun part: making sense of that audio river. To identify a musical note, we need to determine its frequency. Frequency is the rate at which a sound wave vibrates, measured in Hertz (Hz). Every note (A, B, C, etc.) in every octave has a specific frequency. For example, the "A" note above middle C (known as A4) is 440 Hz.

To do this, we use the Web Audio API's AnalyserNode. This node can perform a Fast Fourier Transform (FFT) on the audio stream. Without getting too deep into the mathematics, an FFT is an algorithm that deconstructs an audio signal into its individual frequencies. It tells us, "In this slice of audio, there's a lot of energy at 440 Hz, a little at 880 Hz, etc."

By analyzing the FFT data in real-time, we can identify the fundamental frequency—the strongest, lowest frequency in the sound. This is the note you're playing.

Step 3: From Frequency to Musical Note

Once we have the fundamental frequency, the final step is to map it to a musical note. We have a pre-defined list of all the standard musical notes and their corresponding frequencies. Our code takes the frequency detected from your microphone (e.g., 261.6 Hz) and compares it to this list to find the closest match (in this case, Middle C).

It also calculates the difference, or "cents," between the frequency you played and the true frequency of the target note. This is how Cadence can tell you if you're a little "sharp" (too high) or "flat" (too low).

Why This Matters: Speed and Privacy

The most incredible part of this process is that it all happens entirely on your device. Your audio stream is never sent to our servers. This local processing, made possible by the Web Audio API, is why Cadence is:

• Instantaneous: There's no lag from uploading audio to the cloud. The feedback is as fast as your computer can process it.
• Private: Your practice sessions are your own. We never hear or store your audio.
• Offline-Capable: Once the app is loaded, the core tuning functionality can work even without an internet connection.

Building Cadence has been a journey in pushing the boundaries of what's possible in a web browser. We're proud to have created a tool that is not only powerful and educational but also respects your privacy by design.