
Show HN: A spectrogram app in less than 100 lines of HTML and JavaScript - asab
https://simplespectrogram.app
======
asab
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

------
sbr464
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://musiclab.chromeexperiments.com/Spectrogram/)

[https://github.com/googlecreativelab/chrome-music-
lab/tree/m...](https://github.com/googlecreativelab/chrome-music-
lab/tree/master/spectrogram)

~~~
asab
I really like this one! Haven't read the source yet. 1.77mb page size though -
I think for mobile it can be better.

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

------
xchip
I see yours and I raise mine :P

[https://aguaviva.github.io/GuitarTuner/GuitarTuner.html](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.

~~~
asab
You're on :)

~~~
xchip
:) Feel free to use my tech and add improvements (my visuals are a bit
spartan!)

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

~~~
asab
Fun idea, I'll consider adding an extra surprise..

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

~~~
asab
Sorry you're having trouble. Are you using iOS Safari? 3rd party browsers
unfortunately aren't supported on iOS.

~~~
tiomat
The same problem, using Safari, tap on link and nothing happened.

~~~
asab
You may need to grant microphone access in Settings-->Safari on iOS as well.
Or your version of iOS may be older.

~~~
jhg
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 :)

~~~
asab
Yes it can - I added error handling. Thanks for the feedback, the extra lines
are worth it.

