Live data from Hacker News

Show HN: I've built a spectrogram analyzer web app

webfft.net

31–40 of 71 posts

Re: Show HN: I've built a spectrogram analyzer web app

#31
post #4
post #2

Author here. This is a basic spectrogram visualizer that's mobile friendly. It allows to select regions on the spectrogram and play them separately. There is no grand plan behind this web app: it's just a handy basic tool to capture sounds on your phone and see what they look like.

This is incredible! One of the best spectral tools I've seen. Can we hire you to help us improve the (broken) spectral visualizations on our app? Example: https://fakeyou.com/tts/result/TR:9jy3vew9w0s3ew4keay9m330rd... I would so love to hire you to help us. This is freaking cool. Even if you're not interested, mad props. I really love this.

Your spectrogram looks elongated horizontally because the FFT window size is too large. I use window size 1024 with sample rate 48000 Hz, so one window covers 1024/48000=0.02 sec. This window size looks optimal in most cases: if you change it in my web app, you'll see that all other window sizes get the spectrogram blurry in different ways, but at 1024 it gets into focus.

Of course, don't forget the window function (Hann, or raised cosine), but it looks like you've got that covered because your spectrogram looks smooth.

The color palette looks good in your case. FWIW, my color function is like this: pow(fft_amp, 1.5) * rgb(9, 3, 1). The pow() part brightens the low/quiet amplitudes, and the (9,3,1) multiplier displays 10x wider amp range by mapping it to a visually long black->orange->yellow->white range of colors. Note, that I don't do log10 mapping of the amplitudes.

Re: Show HN: I've built a spectrogram analyzer web app

#32
post #20
post #2

Author here. This is a basic spectrogram visualizer that's mobile friendly. It allows to select regions on the spectrogram and play them separately. There is no grand plan behind this web app: it's just a handy basic tool to capture sounds on your phone and see what they look like.

i really like the filter definition as selection rectangle on time frequency plot ux,

Yeah, that's a bandpass filter, essentially. But I did it the lazy way: audio signal -> FFT -> zero out unwanted frequencies -> inverse FFT.

Re: Show HN: I've built a spectrogram analyzer web app

#34

Web apps like this that accesses user's data should provide samples for users to experiment and explore before they have to give access to their actual data.

Very reasonable ask, sir. In fact, I had added sample.mp3, but forgot to add a button in the UI. Now that's fixed.

Re: Show HN: I've built a spectrogram analyzer web app

#35
post #3
post #2

Author here. This is a basic spectrogram visualizer that's mobile friendly. It allows to select regions on the spectrogram and play them separately. There is no grand plan behind this web app: it's just a handy basic tool to capture sounds on your phone and see what they look like.

Looks like it says “mime type is not supported” on mobile Safari.

This is a problem of iOS not supporting modern efficient codecs.

Re: Show HN: I've built a spectrogram analyzer web app

#36
post #2

Author here. This is a basic spectrogram visualizer that's mobile friendly. It allows to select regions on the spectrogram and play them separately. There is no grand plan behind this web app: it's just a handy basic tool to capture sounds on your phone and see what they look like.

Hi, I love it. Perhaps we should chat about making it for radio data as well? We could potentially use it for our radar systems.

Re: Show HN: I've built a spectrogram analyzer web app

#37
post #25

Here is a spectrogram of the track, "Look" from the album, "Songs about my Cats" by Venetian Snares. https://imgur.com/sRe6Ypv Aphex twin did something similar, but this is more playful in my opinion.

This is very interesting what was the Aphex Twin’s track with this concept?

Re: Show HN: I've built a spectrogram analyzer web app

#38
post #29
post #3

Earlier quoted context omitted.

Looks like it says “mime type is not supported” on mobile Safari.

It uses "audio/webm;codecs=opus" to record mic. Now it's possible to change it in the config menu in the top right. Safari probably needs audio/mp3. Edit: also consider "audio/foo;codecs=pcm" where "foo" is something compatible with Safari.

ugh could you maybe add some code to detect apple-platforms and set this accordingly (like batteries included)?

edit: tyvm, nice idea! would very much like to try it

Re: Show HN: I've built a spectrogram analyzer web app

#39
post #2

Author here. This is a basic spectrogram visualizer that's mobile friendly. It allows to select regions on the spectrogram and play them separately. There is no grand plan behind this web app: it's just a handy basic tool to capture sounds on your phone and see what they look like.

Nice tool. Some suggestions:

- Allow playback via Space button. Show a play marker to let the user know where in the sample they are, even without having selected a part.

- Choose a sample that is easier on the ears than high-pitched bird song. I was really shocked when the first loud part came.

Re: Show HN: I've built a spectrogram analyzer web app

#40
post #37
post #25

Here is a spectrogram of the track, "Look" from the album, "Songs about my Cats" by Venetian Snares. https://imgur.com/sRe6Ypv Aphex twin did something similar, but this is more playful in my opinion.

This is very interesting what was the Aphex Twin’s track with this concept?

Its usually called 'formula' or 'equation' - B side of 'windowlicker'. There's a video at the link below

https://www.reddit.com/r/Damnthatsinteresting/comments/kvjil...

Post reply on HN