Drawing a spectogram 2D (or 3D) from a recorded audio

please format code with </> button * homework policy * asking questions

Hi Everybody,

is there any code to do what in the object of the discussion?

Best regards

Hi, Have you tried the examples from the sound library?

not yet. Any suggestion? thanks

Well, download the library and test for example FFTSpectrum, and adapt the code to your need.


Let us know what you discover.

Once you add a library be sure to explore the examples in the Processing PDE.
These are in File > Examples > …


1 Like

See http://code.compartmental.net/tools/minim/quickstart/

1 Like

Thanks! I just need to draw the picture in attach from a recorded voice file but I can’t…


Yes, show your entire code/attempt


It was simple enough to adapt this:

To a plot of frequency vs time (updated each frame):

The possibilities are endless!




I stated above:
“frequency vs time (updated each frame)”

I was actually plotting:
“amplitudes (for each frequency) vs time (updated each frame)”

See below for an update.


Not sure if this what youre looking for

One downside to my sketch is that it cannot produce an image without playing the audio, and the resolution of the image is inversly proportional to playback speed meaning playing the audio at original speed is required for the best resolution. Im unsure weather this is a limitation of the sound library or processing itself.

1 Like

thanks! but what about the different colours that indicates the different level of dBels? In your exemple, it seems that only frequencies and time are represented…

Best regards

P.S. In the code you quoted there seems not to be the possibility to import a voice recorded file, isn’t it? Thanks

I took the basic examples and wrote the code to do this.

You will have to write code for this.
I do not have a “canned” solution for you and wrote the code from scratch using the existing library.

There are examples that use a sound file in the Sound Tutorial and in the examples that come with Processing.


Hey @humus,

I was recently on a similar quest and found this useful sketch on github:

It works for me on v3.5.4, though it noted that it seems to display only one graph at a time.

Thanks! Which of the four codes have to be used?

It works for me too.

I have a question, is anyone know a way to get pixels of the spectrogram and convert again in audio using Processing?

May be you need to do an “inverse discrete Fourier transform

as an experiment I would try to read each pixel color in a vertical line in the region, that’s the frequencies and their strength at a given moment.

Combine a number (Region’s height gives you the number of bands) of Sine Wave Oscillator at each given frequency with an amplitude depending on the color if the point

1 Like

that’s really interesting. Jay, might you give an example code to do this?

I don’t have any example, and on second thoughts I would use minim to explore this

See this example
there is an empty window at start, horizontal axis is a frequency bucket of the FFT and the Vertical axis would be the value of that frequency

So if you click on one point in there and it will be like a FFT on a pure sine wave as you have only one specific frequency at a given level.

of course if you set multiple points (hit ‘c’ to clear) you are drawing the FFT of a signal that would be the sum of sine waves and you can hear this from the audio of your computer.

Now this single representation is equivalent to one vertical line in your color FFT chart where the height of the bar has been color coded. So if you read one vertical line and transform the colors into height, you have the equivalent of the diagram from that app, at a given point in time.

going through your FFT color representation along the X axis is like moving through time, so if you move at the FFT window sampling rate and calculate the inverse FFT and play it, you would get something (likely / possibly ?) that sounds somewhat like your original audio (only way worse :slight_smile: )

1 Like


I was able to add a few lines of code to the Processing sound library examples and do this:

Upper left is the FFT plot of amplitude (y) vs frequency (x) with color added to amplitudes for each frequency.

Lower left is time (y) vs frequency (x) with color added to amplitudes for each frequency.

Right side is frequency (radius) vs time (angle) with a rotating sweep of the same data from lower left plot.

Time was updated each frame.

I am posting this to demonstrate that this is achievable.


1 Like