Spectrogram
Live sound spectrogram in JavaScript. It can be configured to change buffer size, FFT function, colormap, window type, minimum and maximum frequencies, loudness sensibility, scrolling direction, scrolling speed and pause scrolling.
Install / Use
/learn @lvillasen/SpectrogramREADME
Spectrogram
Live sound spectrogram in JavaScript. It can be configured to change buffer size, FFT function, colormap, window type, minimum and maximum frequencies, loudness sensibility, scrolling direction, scrolling speed and pause scrolling.
It has the option to display frequencies in linear mode or in Mel scale (logarithmic scale, see https://en.wikipedia.org/wiki/Mel_scale).
You can easily add new colormaps, for example to add the colormap "PuBu" add
<option value="PuBu">Colormap: PuBu</option>
after line 61 of index.html.
On the upper left corner it displays the instantaneous value of the frequency with the maximum loudness.
The loudness scales in dB units are not calibrated.
Usage
- Clone the repository
- Open the file index.html with any web browser
Live Demo
https://ciiec.buap.mx/Spectrogram/
Credits
-
We use the Web Audio API (https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
-
The colormaps were taken from https://github.com/timothygebhard/js-colormaps
-
It uses the custom FFT function from https://github.com/lvillasen/FFT.js
License
Related Skills
next
A beautifully designed, floating Pomodoro timer that respects your workspace.
product-manager-skills
33PM skill for Claude Code, Codex, Cursor, and Windsurf: diagnose SaaS metrics, critique PRDs, plan roadmaps, run discovery, and coach PM career transitions.
devplan-mcp-server
3MCP server for generating development plans, project roadmaps, and task breakdowns for Claude Code. Turn project ideas into paint-by-numbers implementation plans.
