Visual Artifact on the Left Edge of AudioVisualiserComponent When Playback Starts

General JUCE discussion
1

Hi everyone,

I’m relatively new to audio plugin development using JUCE, and I’ve run into a small but persistent visual issue that I hope someone can help me with.

I followed this excellent tutorial series by Dr. Bruisin on YouTube:
Waveform Visualizer Tutorial

Everything is working fine overall — the waveform displays and updates in real time — but every time I start playback, a small vertical line appears on the very left side of the AudioVisualiserComponent. It looks like a rendering glitch or leftover data, and it shouldn’t be there.

Here’s what I’ve tried so far:

  • Calling waveform.clear() inside prepareToPlay() (didn’t help).
  • Ignoring silent buffers in processBlock() by checking for signal above a threshold.
  • Adding a waveformStarted flag to call waveform.clear() only once when the first non-silent buffer arrives.

Despite all that, the line still appears — almost like the component renders a frame before any valid audio data is pushed. I’m wondering if this is expected behavior, or if there’s a cleaner way to reset or flush the internal buffer of AudioVisualiserComponent to avoid this kind of initial artifact.

Has anyone else come across this issue? Any suggestions or best practices would be much appreciated!

Thanks in advance :folded_hands:

image
image1361×958 57.9 KB

2

Without seeing the code, I’d suspect that it’s coming from the last frame of the rendering being “wrapped” around to 0, and thus drawing at x=0 (when it thinks it’s drawing at x=n, where it should stop at x=n-1). I’d check the loop code.

3

Thanks for reporting. I also saw this issue in the AudioRecordingDemo in the DemoRunner on macOS, and the problem seemed to be in the visualiser itself.

I’ve pushed a change intended to address this issue:

Please update to the latest develop branch and let us know if the issue persists.