Start analysing audio
Select Microphone or a MP3 File
as input.
Select
the desired speed for the Spectrogram.
Select
the desired FFT frequency count.
Press
Start Visualization to start the analysis.
Use
Save Spectrogram to save a screenshot of the spectrogram to file.
What is a Spectrum Analyzer anyway?
An FFT (Fast Fourier Transform) spectrum analyzer is a tool used to analyze the frequency components of a
signal, such as sound or vibration, in real time. It works by applying the FFT algorithm to convert a
time-domain signal (how it changes over time) into the frequency domain (which frequencies it contains and
their intensities).
The analyzer displays this data as a graph, where the x-axis represents frequency and the y-axis shows
amplitude or power. This visualization helps users understand the characteristics of the signal—identifying
peaks, patterns, or noise at specific frequencies. It's widely used in fields like audio engineering,
vibration analysis, and scientific research to study and manipulate signals.
What is a Spectrogram Analyzer anyway?
An FFT spectrogram analyzer is a powerful tool that combines the principles of Fast Fourier Transform (FFT)
and spectrogram analysis to visualize the frequency content of a signal over time.
Here's how it works:
-
FFT: The analyzer uses the FFT algorithm to break down a time-domain signal (e.g., sound
waves) into
its frequency components, identifying the strength (amplitude) of different frequencies.
-
Time Component: Instead of analyzing a single moment in the signal, it continuously performs
FFT on
overlapping time segments, capturing how frequencies change dynamically.
-
Spectrogram Visualization: The results are displayed as a spectrogram, where:
-
The x-axis represents time.
-
The y-axis represents frequency.
-
The color or intensity indicates the amplitude or power of specific frequencies at each
moment in
time.
This visualization allows users to see the evolving frequency characteristics of a signal, making it
especially useful for applications like audio analysis, speech processing, and studying transient
signals (e.g., bird calls, engine noises). By observing the spectrogram, users can identify
patterns,
anomalies, or trends in the signal's behavior.
How was it built
This software was created using Vibe Coding by a Large Language Model LLM / chatbot
and reworked in look & feel.
Some features had to be implemented manually and
corrections and improvements had to be made.
The following Vibe Coding prompts were used on DeepSeek:
"Create a single page html with javascript in one file. add a load button for mp3 music. upon load play
the music and display a realtime fft chart using chart.js"
"When no file is loaded use the microphone as audio input"
"Could not access microphone. Please ensure you have granted microphone permissions"
"Label the frequency. Also add a canvas and draw a floating spectrogram"
At this point a new DeepSeek session was started with the previous code.
"Get rid of the Load MP3 button. Load the file immediately when the file is loaded with the file select
button. Make sure the animation can restart after stop currently there is a 'createMediaElementSource'
on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
Also add labels to the x-axis of the chart."
"fft4.html:131 Uncaught SyntaxError: missing ) after argument list (at fft4.html:131:58)"
"'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a
different MediaElementSourceNode. there is just a 0 frequency label, label the full range."
"The frequency labels range to only 1k but the range is up to 20000 Hz. Compute the labels correct
according to the used fft settings. Also add a number combobox that lets the user specify the FFT size."
"upon restart: chart.js:19 Uncaught Error: Canvas is already in use. Chart with ID '0' must be
destroyed before the canvas with ID 'fftChart' can be reused. With a different fft size you need to
adjust the frequency labels."
At this point a new Gemini session was started with the previous code.
"Adjust the height of the spectrogram canvas according to the fft size. 1024 fft size results in 1024
px height. Add a button to save a spectrogram screenshot to file. Add a speed slider. For highest speed
push one frequency data and shift one pixel. for lowest speed collect and interpolate 50 consecutive
frequency data push it and shift one pixel."
