Show HN: A spectrogram app in less than 100 lines of HTML and JavaScript

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

Nice work, I like the simplicity & loc count.

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...

I see yours and I raise mine :P

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.

Doesn’t work on iOS, and provides no useful information on the page as to what it is supposed to be doing.

Neat. I like how whistling produces a narrow band. Could make a flappy bird game from whistling!