A while ago, I just wanted to do something simple: drop in an audio file, see the frequency spectrum, find suspicious peaks, and move on.
But most tools I found were either ๐ฅ๏ธ full desktop apps, ๐งฑ more complicated than I needed, โ๏ธ uploading audio to a server, or just felt a little outdated.
So I started wondering: why can't this just run entirely in the browser?
That question turned into Online Spectrum Analyzer: ๐ https://onlinespectrumanalyzer.com
๐ Keep the audio local
The main idea was simple: your audio shouldn't need to leave your device just to calculate an FFT. Modern browsers already have the Web Audio API, so the whole flow can stay client-side: audio file โ decode locally โ analyze โ visualize.
No account. No mandatory backend upload. I also added ๐๏ธ microphone input, so you can inspect live audio directly.
๐ The FFT was the easy part
Getting frequency data wasn't really the hardest part. Making it readable was.I spent more time than expected tweaking FFT size, smoothing, frequency scaling, peak detection, low-frequency visibility, and rendering performance.A raw FFT graph can look technical while still being surprisingly hard to interpret. I wanted someone looking for a 50/60 Hz hum to be able to spot it without first studying DSP.
๐ Then I added a spectrogram
This became one of my favorite parts. A spectrum shows what frequencies exist right now. A spectrogram shows how frequencies change over time.
That makes things like electrical hum, background noise, sudden transients, high-frequency tones, and strange sections of audio much easier to spot visually.
Sometimes a problem is easier to see than to hear.
๐คฏ The browser is surprisingly capable
This project reminded me how much signal processing can now happen directly in the browser. You already get ๐ต audio decoding, ๐๏ธ microphone access, ๐ real-time analysis, ๐งฎ FFT data, ๐ผ๏ธ canvas visualization, and pretty decent client-side performance.
A few years ago, I probably would've built this as upload โ server โ process โ return result. For this kind of tool, that would actually make the experience worse.
๐ ๏ธ What it does now
Right now it supports:
๐ง audio file analysis
๐๏ธ live microphone input
๐ real-time frequency spectrum
๐ peak frequency detection
๐ spectrogram visualization
๐ local browser-side processing
I'm still improving it. One direction I'm interested in is making it more useful for practical audio debugging: hum, noise, clipping, resonances, strange tones, recording issues, etc. Without turning it into a giant DAW.
If you work with audio, Web Audio, music production, podcasting, or browser DSP, I'd be interested to know what you normally look for in a spectrum analyzer.
๐ Try it here: https://onlinespectrumanalyzer.com
Feedback is welcome ๐
Top comments (2)
The local-first angle is the part Iโd care about too. One gotcha with AnalyserNode is that smoothingTimeConstant can make a peak look โstableโ while hiding short transients; I usually compare a smoothed display with a zero-smoothing path for peak detection. Otherwise the spectrogram can look great but still miss the click you were hunting.
Thatโs a really good point. I was using the same smoothed AnalyserNode data for both the display and some of the live measurements. Iโve now separated them: smoothing is only used for the Spectrum display, while peak detection and the rolling spectrogram use a zero-smoothing path. The full-file diagnostics already work from the decoded samples directly. Thanks for catching that.