Spectral Analysis of Non-stationary Signals using Different Windowing Techniques http://dsp.ilamparithi.dev/
  • JavaScript 60%
  • CSS 17.1%
  • HTML 12%
  • Python 10.9%
Find a file
2026-06-29 16:04:57 +05:30
waves Update info page with attributions and licence; Update wave generator with non stationary signal generation 2026-05-04 11:55:50 +05:30
.gitignore Update info page with attributions and licence; Update wave generator with non stationary signal generation 2026-05-04 11:55:50 +05:30
app.py Tkinter app for quick comparison of the windows 2026-05-01 16:05:46 +05:30
fft.py STFT for numpy signals 2026-05-01 14:36:55 +05:30
index.html Add a maximise button to side-by-side spectrograms 2026-05-04 15:57:28 +05:30
LICENSE Initial commit 2026-03-31 11:33:20 +05:30
README.md Update README.md 2026-05-05 11:18:33 +05:30
script.js Add a maximise button to side-by-side spectrograms 2026-05-04 15:57:28 +05:30
stft.py Add bartlett window 2026-05-04 14:28:10 +05:30
style.css Add a maximise button to side-by-side spectrograms 2026-05-04 15:57:28 +05:30

STFT Spectrogram Viewer

A browser-based tool for spectral analysis of non-stationary signals using the Short-Time Fourier Transform (STFT). Load an audio file, choose a windowing technique, and inspect the resulting spectrogram interactively.

Features

  • STFT pipeline with configurable FFT size, hop size, and window function
  • Five window functions: Hamming, Hann, Blackman, Rectangular, Bartlett
  • Inferno colormap with dB-scaled output (peak-normalised, -80 dB floor)
  • Audio playback with a synchronized cursor overlaid on the spectrogram
  • MATLAB-style zoom: click and drag to zoom into any region; double-click or use the reset button to return to full view
  • Collapsible sidebar for maximum spectrogram canvas area
  • KaTeX equations showing the window function formula for the selected window
  • Pure JavaScript, no build step, no frameworks

Getting Started

Open index.html directly in a browser, or serve the project directory with any static file server:

python -m http.server 8000

Then navigate to http://localhost:8000.

Usage

  1. Click Choose File and select a WAV or other browser-supported audio file.
  2. Adjust STFT parameters in the sidebar (FFT size, hop size, window type).
  3. Click Run to compute and render the spectrogram.
  4. Click Play to play back the audio with a cursor tracking position on the spectrogram.
  5. Click and drag on the spectrogram to zoom into a time-frequency region. Double-click to reset.

Project Structure

index.html          Single-page app shell
style.css           Engineering dark theme layout
script.js           STFT pipeline, Web Audio playback, zoom, cursor
app.py              Python/Tkinter prototype (not used by the web app)
fft.py              FFT utilities for the Python prototype
stft.py             STFT implementation for the Python prototype
waves/              Sample waveform generation scripts

Dependencies

Both are loaded from CDN at runtime; no npm install is required. This also means that you need an internet connection to make the site fully work.

About the Python Scripts

The python scripts were written by hand first for learning purposes, then the website was made with the python implementation as reference, and with the aide of Claude Sonnet 4.6.

License

See LICENSE.