[ssgh]

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.

[echelon]

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.

[ssgh]

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.

[timlod]

In case OP doesn't respond, I could probably help you with this - feel free to send an email!

[KennyBlanken]

Not OP, but...why on earth does having your site open in firefox nearly set my computer on fire?

[slhck]

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.

[montag]

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

[ssgh]

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.

[geraldhh]

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

[_emacsomancer_]

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

[grugagag]

I get the same error on Iphone/Safari

[lokar]

Also iPhone/chrome

[dr_dshiv]

Same…

[wpietri]

Very neat! May I suggest adding a button to switch to log scale for frequency? I love the ability to select and play back just a particular set of frequencies. But voice uses only about ~15% of the screen height [1], so it's hard to play with.

[1] https://en.wikipedia.org/wiki/Voice_frequency

[ssgh]

You can select an area and zoom into it. Another option is to change sample rate in the config in the top right.

[wpietri]

Zooming is not really a way to get what I'm after, because I was trying to hear particular bands one after the other. E.g., trying to listen to one octave after the next. And since the octave relationship isn't linear, I'm thinking a non-linear scale would better match what I was trying to do.

[Groxx]

Quite neat, thanks for sharing! I've never been able to play portions like this before, it's interesting.

Is there any way to make this display in real time, or is that not (currently?) possible with audio APIs?

[Bewelge]

The WebAudio API has an anlayser node that can create spectrogramms in real-time. The ones I've created in the past were nowhere near as detailed as this one though.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A...

[lokimedes]

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.

[shangers]

Can I ask what kind of use cases would a spectrogram have for radar data? I've been messing around with making my own spectrogram app as well (linux desktop app and not web app though) and would be stoked to know if there's any potentially easy to reach use cases for it

[lokimedes]

We basically make doppler radars - here frequency-shift is proportional to the speed of the object. Most other radars (pulse-radars) uses the bandwidth of a pulse to gain range resolution (the wider the bandwidth the better the res).

Here's a few (very old) plots of how our radars see the world through a spectrogram: https://weibelradars.com/space/space-industry/

What would be cool, would be a browser-based way to do soft analysis of these plots.

[galcerte]

Radar signals are modulated in very specific ways, which are visible right away even with plenty of noise on a spectrogram. Classifying the modulation of radar signals is something common in military contexts, since it allows you to listen for emissions and be able to tell if it's an enemy or an ally. I bet it has more uses than that, but it's the first one I could think of.

[ssgh]

You can reach me at: ssgh at mm dot st.

[rickcarlino]

I get the mime error on Firefox mobile. Very interesting idea though, hope I can try it in the future.

[a-dub]

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

[ssgh]

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