from Hacker News

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

by asab on 7/6/19, 3:17 AM with 16 comments

  • by asab on 7/6/19, 3:17 AM

    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

  • by sbr464 on 7/7/19, 1:36 PM

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

  • by xchip on 7/7/19, 2:31 PM

    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.

  • by bradknowles on 7/6/19, 3:55 AM

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

  • by quickthrower2 on 7/7/19, 2:51 AM

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