# Displaying spectrogram data in plugin

**URL:** <https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348>\
**Category:** Audio Plugins\
**Created:** [May 12, 2024, 10:42pm UTC](https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348 "2024-05-12T22:42:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![knotalun](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@knotalun](https://forum.juce.com/u/knotalun)\
**Post date:** [May 12, 2024, 10:42pm UTC](https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348/1 "2024-05-12T22:42:39Z")

</div>

I know this may be a trivial question, but I’m trying to implement a spectrogram display in my plugin. I’ve gone through the tutorial of creating a spectrogram with the FFT transform in JUCE, and I thought it would be straightforward to just addAndMakeVisible to the PluginEditor since the class extends an AudioAppComponent.

The black background shows up in my UI, but the actual spectrogram data doesn’t seem to be registering. I was wondering how I would go about providing the audio data that is running through my processBlock callback in PluginProcessor into the getNextAudioBlock callback of my spectrogram component.

Thanks for any suggestions.

---

<div class="post-metadata">

**Author:** ![zsliu98](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/zsliu98/32/22502_2.png) [@zsliu98](https://forum.juce.com/u/zsliu98)\
**Post date:** [May 13, 2024, 3:20am UTC](https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348/2 "2024-05-13T03:20:42Z")

</div>

You may need to separate that exmaple into a backend part and a front end part cause you are developing a **plugin** instead of an **app**. BTW, running FFT on the message thread might be a bad idea for a plugin. Instead, you may create a background thread to run the FFT. A good example is here:

> **[GitHub - ffAudio/Frequalizer: Equalizer using JUCE new dsp module](https://github.com/ffAudio/Frequalizer)**
>
> Equalizer using JUCE new dsp module. Contribute to ffAudio/Frequalizer development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Marcusonic](https://avatars.discourse-cdn.com/v4/letter/m/f0a364/32.png) [@Marcusonic](https://forum.juce.com/u/Marcusonic)\
**Post date:** [May 13, 2024, 8:38am UTC](https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348/3 "2024-05-13T08:38:34Z")

</div>

In the `AudioProcessor`, you should maintain a buffer updated with the audio data so that it can be periodically read from a timer in the editor to generate the spectrogram.

But you have to control that it’s not read and written simultaneously. A double buffer could be used so that one is used for writing and the other for reading alternately, but it’s better to use a circular buffer since the spectrogram doesn’t have to wait for the buffer to be filled. Instead, it will always read the last block of FFT size, regardless of the amount of updated audio data.

---

<div class="post-metadata">

**Author:** ![daniel](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/daniel/32/790_2.png) [@daniel](https://forum.juce.com/u/daniel)\
**Post date:** [May 13, 2024, 9:50am UTC](https://forum.juce.com/t/displaying-spectrogram-data-in-plugin/61348/4 "2024-05-13T09:50:13Z")

</div>

> [@knotalun](#):
>
> I was wondering how I would go about providing the audio data that is running through my processBlock callback in PluginProcessor into the getNextAudioBlock callback of my spectrogram component.

The AudioSourceChannelInfo has a constructor that takes an AudioBuffer, so it is as easy as putting squiggly braces around the buffer:

```auto
// juce::AudioBuffer<float>& buffer from call

spectrogram->getNextAudioBlock ({buffer});

// or explicitly:
juce::AudioSourceChannelInfo info (buffer);
spectrogram->getNextAudioSource (info);

```

You see, that AudioSource is not necessarily the right choice, but you can use it. It’s not a source but a sink after all 😉

The main problm about how to make sure the processBlock doesn’t call into the editor was covered by the other answers. Let us know if you have questions about that.