In this topic, we will learn the concept of polymorphism. Download the starter code here ( Link )

We will start off creating a new Component, WaveformDisplay, and get it to display.

At the Projucer window, select Source on the right panel and click + and select Add New Component class (split between a cpp & header) give the name WaveformDisplay. Make sure that the cpp and h files are under the Source folder.

First, we will make some changes to the paint function in WaveformDisplay.cpp to update the UI.

void WaveformDisplay::paint (juce::Graphics& g)
{
    g.fillAll (getLookAndFeel().findColour (juce::ResizableWindow::backgroundColourId));   // clear the background

    g.setColour (juce::Colours::grey);
    g.drawRect (getLocalBounds(), 1);   // draw an outline around the component

    g.setColour (juce::Colours::orange);
    g.setFont (20.0f);
    g.drawText ("File not loaded", getLocalBounds(),
                juce::Justification::centred, true);   // draw some placeholder text
}

Go to DeckGUI.h, import the WaveformDisplay component and declare a private variable of it.

#pragma once

#include "../JuceLibraryCode/JuceHeader.h"
#include "DJAudioPlayer.h"
#include "WaveformDisplay.h"

class DeckGUI    : public Component,
                   public Button::Listener, 
                   public Slider::Listener, 
                   public FileDragAndDropTarget
{
...
private:
		...
    DJAudioPlayer* player;
    
    WaveformDisplay waveformDisplay;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (DeckGUI)
};

Go to DeckGUI.cpp, update the GUI to include the WaveformDisplay.

DeckGUI::DeckGUI(DJAudioPlayer* _player) : player(_player)
{

    addAndMakeVisible(playButton);
    addAndMakeVisible(stopButton);
    addAndMakeVisible(loadButton);
       
    addAndMakeVisible(volSlider);
    addAndMakeVisible(speedSlider);
    addAndMakeVisible(posSlider);
    
    addAndMakeVisible(waveformDisplay);

    ...
}

void DeckGUI::resized()
{
    double rowH = getHeight() / 8;
    playButton.setBounds(0, 0, getWidth(), rowH);
    stopButton.setBounds(0, rowH, getWidth(), rowH);  
    volSlider.setBounds(0, rowH * 2, getWidth(), rowH);
    speedSlider.setBounds(0, rowH * 3, getWidth(), rowH);
    posSlider.setBounds(0, rowH * 4, getWidth(), rowH);
    waveformDisplay.setBounds(0, rowH*5, getWidth(), rowH*2);
    loadButton.setBounds(0, rowH * 7, getWidth(), rowH);
}

Compile and run the project. You should see the waveform display shows up.

Next, we will create the AudioThumbnail.

Go to MainComponent.h, declare two private variables.

class MainComponent   : public AudioAppComponent
{
...

private:
    AudioFormatManager formatManager;
    AudioThumbnailCache thumbCache{100}; // store up to 100 waveforms
    
    ...
};