Hi HN, creator here. Lately I've been enjoying learning about the Web Audio API and wanted to apply it. I wanted a quick debugging tool to inspect the sounds I was synthesizing and ended up creating this. It's vanilla JS, so just view source to check it out.
Things I've ended up enjoying with it:
- Hum, whistle, and sing my favorite tunes and compare the images
- Take it on a nature walk and look at bird calls
- Try to make sounds to draw a specific picture or shape
How it works:
On load, the app requests microphone access, and connects that audio stream to a WebAudio AnalyzerNode. The AnalyzerNode offers a fast fourier transform that is called repeatedly using requestAnimationFrame. For each frame, the entire contents of the canvas are shifted left by 1 virtual pixel, and the current fourier frequency bins are plotted in the rightmost column.
Limitations:
- There are 1024 frequency bins, compared to roughly 20,000 hertz hearing range, so the resolution is pretty good but not perfect as each dot represents a range of ~20 hertz.
- Unfortunately doesn't work in iOS Firefox or Chrome; Apple won't offer microphone access via getUserMedia to 3rd party browsers.
- It has a PWA manifest; Android users should be able to add to homescreen. iOS users still can't since getUserMedia is restricted in iOS PWAs
Can your code detect this case and at least show a warning? I realize it’s extra LoCs, but sitting here and tapping the damn phone with no feedback is not much fun :)
Definitely. I’ve rewritten the source personally in detail just to understand how it was done, (I was also learning the WebAudio APIs). Once you get beyond the client boilerplate and samples it’s not too bad or complicated.
16 comments
[ 3.3 ms ] story [ 51.0 ms ] threadThings I've ended up enjoying with it:
- Hum, whistle, and sing my favorite tunes and compare the images
- Take it on a nature walk and look at bird calls
- Try to make sounds to draw a specific picture or shape
How it works:
On load, the app requests microphone access, and connects that audio stream to a WebAudio AnalyzerNode. The AnalyzerNode offers a fast fourier transform that is called repeatedly using requestAnimationFrame. For each frame, the entire contents of the canvas are shifted left by 1 virtual pixel, and the current fourier frequency bins are plotted in the rightmost column.
Limitations:
- There are 1024 frequency bins, compared to roughly 20,000 hertz hearing range, so the resolution is pretty good but not perfect as each dot represents a range of ~20 hertz.
- Unfortunately doesn't work in iOS Firefox or Chrome; Apple won't offer microphone access via getUserMedia to 3rd party browsers.
- It has a PWA manifest; Android users should be able to add to homescreen. iOS users still can't since getUserMedia is restricted in iOS PWAs
Here's another example I found that I always liked (w/source link) but definitely more complex.
https://musiclab.chromeexperiments.com/Spectrogram/
https://github.com/googlecreativelab/chrome-music-lab/tree/m...
https://aguaviva.github.io/GuitarTuner/GuitarTuner.html
Each bar is correspond to each key in a piano. The red vertical lines are the notes of a guitar played open string.
You can use this to tune your instruments and to understand its harmonics too.