👉👉👉 Try it here! 👈👈👈
A chromatic tuner that can identify the frequency of a sound, calculate the closest note, and show the shape of the sound wave using an oscilloscope 🌊
Using the AudioContext API, we can get sound data from the user's microphone. The form of this data is a stream of floats that range from negative to positive in a repeating pattern. This data is loaded into a buffer, where we can use autocorrelation to figure out how often the pattern repeats each second (i.e, the frequency of the pitch). After that we can identify the closest musical note to that pitch (using MIDI), and the gap between the pitch and the closest note.
The oscilloscope paints the float data onto a <canvas /> to give a visual representation. The oscilloscope animation updates as fast as possible (depending on screen refresh rate).
I prefer using React, but this project wasn't complex enough to necessitate using a full-blown framework like Nextjs. Astro was a great alternative, as it gave the ability to use react with minimal overhead. If I choose to expand this project in the future Astro will be able to scale and introduce more capabilities as required.
At first I wanted to use Tailwind for this project, but eventually I swapped to Vanilla Extract. While Tailwind does have some utility for mocking together things quickly, I found that I didn't enjoy polluting my JSX code with jumbles of tailwind utility classes. I find the CSS-in-JS approach of Vanilla Extract to be a lot easier to keep organised and to navigate when trying to track down a specific style rule 🔎
Nothing more to say about TS other than it's great ❤️
There was quite a bit of complicated logic in the sound -> frequency -> note conversion. Having unit tests to make sure no bugs were slipping in was 👌