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

**URL:** <https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708>\
**Category:** Libraries\
**Created:** [November 25, 2020, 5:59pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708 "2020-11-25T17:59:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [November 25, 2020, 5:59pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/1 "2020-11-25T17:59:52Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hi Everybody,

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

Thanks  
Best regards  
Roberto

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 6:17pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/2 "2020-11-25T18:17:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [November 25, 2020, 6:21pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/3 "2020-11-25T18:21:49Z")

</div>

not yet. Any suggestion? thanks

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 25, 2020, 6:29pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/4 "2020-11-25T18:29:11Z")

</div>

> [@humus](#):
>
> Any suggestion?

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 25, 2020, 7:17pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/5 "2020-11-25T19:17:13Z")

</div>

> [@humus](#):
>
> Any suggestion?

Explore…

> **[Libraries](https://processing.org/reference/libraries/)**
>
> Extend Processing beyond graphics and images into audio, video, and communication with other devices.

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 \> …

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 25, 2020, 9:53pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/6 "2020-11-25T21:53:48Z")

</div>

See [http://code.compartmental.net/tools/minim/quickstart/](http://code.compartmental.net/tools/minim/quickstart/)

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [November 30, 2020, 9:07pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/7 "2020-11-30T21:07:08Z")

</div>

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

![Spectrogram-19thC.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/35e18f955425c875397089611154e61bc2940fcc.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 30, 2020, 9:23pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/8 "2020-11-30T21:23:40Z")

</div>

Yes, show your entire code/attempt

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 1, 2020, 11:18am UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/9 "2020-12-01T11:18:34Z")

</div>

Hello,

It was simple enough to adapt this:

> **[FFT::analyze() \\ Language (API) \\ Processing 3+](https://processing.org/reference/libraries/sound/FFT_analyze_.html)**

To a plot of frequency vs time (updated each frame):  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5bff4c535105bd7822f09983c7079c9bf39a0f5d.png)

The possibilities are endless!

`:)`

References:

- [https://en.wikipedia.org/wiki/Spectrogram](https://en.wikipedia.org/wiki/Spectrogram)

_ **Update** _

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [December 1, 2020, 12:46pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/10 "2020-12-01T12:46:38Z")

</div>

Not sure if this what youre looking for

> [@Fft audio analysis to pimage](https://discourse.processing.org/t/fft-audio-analysis-to-pimage/18861):
>
> Just thought I would share this. Its a audio to fft image sketch. Not seen one in processing yet, but maybe I haven’t looked in the right place. May be interesting for some. This will be added to the current program I am making, and will be accompanied with filters and neural networks for analysis. More to come soon. import processing.sound.\*; SoundFile superliminal = null; Amplitude amp; FFT fft; AudioIn in; //to set volume Sound s; int bands = 512; float[] spectrum = new float[bands]; Arr…

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.

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [December 7, 2020, 2:06pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/11 "2020-12-07T14:06:53Z")

</div>

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…

Thanks  
Best regards

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [December 7, 2020, 2:10pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/12 "2020-12-07T14:10:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 7, 2020, 8:30pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/13 "2020-12-07T20:30:40Z")

</div>

> [@humus](#):
>
> is there any code to do what in the object of the discussion?

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

> [@humus](#):
>
> but what about the different colours that indicates the different level of dBels?

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.

> [@humus](#):
>
> In the code you quoted there seems not to be the possibility to import a voice recorded file, isn’t it?

There are examples that use a sound file in the [Sound Tutorial](https://processing.org/tutorials/sound/) and in the examples that come with Processing.

`:)`

---

<div class="post-metadata">

**Author:** ![lightscript](https://avatars.discourse-cdn.com/v4/letter/l/e19adc/32.png) [@lightscript](https://discourse.processing.org/u/lightscript)\
**Post date:** [December 10, 2020, 6:53pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/14 "2020-12-10T18:53:51Z")

</div>

Hey @humus,

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

> **[sabamotto/Spectrogram](https://github.com/sabamotto/Spectrogram)**
>
> Spectrogram Analyzer with Processing3 and Minim. Contribute to sabamotto/Spectrogram development by creating an account on GitHub.

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

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [December 11, 2020, 9:27am UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/15 "2020-12-11T09:27:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mcanet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcanet/32/11403_2.png) [@mcanet](https://discourse.processing.org/u/mcanet)\
**Post date:** [December 11, 2020, 10:19am UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/16 "2020-12-11T10:19:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jay\_m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jay_m/32/11020_2.png) [@jay\_m](https://discourse.processing.org/u/jay_m)\
**Post date:** [December 11, 2020, 2:50pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/17 "2020-12-11T14:50:18Z")

</div>

> [@mcanet](#):
>
> 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](https://www.seas.upenn.edu/~ese224/labs/300_inverse_dft.pdf)”

as an experiment I would try to [read each pixel color](https://processing.org/reference/get_.html) 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](https://processing.org/reference/libraries/sound/SinOsc.html) at each given frequency with an amplitude depending on the color if the point

---

<div class="post-metadata">

**Author:** ![humus](https://avatars.discourse-cdn.com/v4/letter/h/e36b37/32.png) [@humus](https://discourse.processing.org/u/humus)\
**Post date:** [December 11, 2020, 4:24pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/18 "2020-12-11T16:24:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jay\_m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jay_m/32/11020_2.png) [@jay\_m](https://discourse.processing.org/u/jay_m)\
**Post date:** [December 11, 2020, 5:51pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/19 "2020-12-11T17:51:18Z")

</div>

I don’t have any example, and on second thoughts I would use [minim](http://code.compartmental.net/minim/) to explore this

See [this example](https://github.com/ddf/Minim/blob/master/examples/Analysis/FFT/Inverse/Inverse.pde)  
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 🙂 )

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 12, 2020, 4:39pm UTC](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/20 "2020-12-12T16:39:43Z")

</div>

Hello,

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

 ![Capture.PNG](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9964bb78b886b3f5bdcfabfc198468b6a4571e41.jpeg)

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.

`:)`

[Next page](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708.md?page=2)