How to integrate Keyboard Component into Midi Sampler

General JUCE discussion
1

Hey everyone!
I am trying to build a sampler using the samplerVoice/samplerSound components and have just managed to build the basic helloSampler as seen in this video
Audio Programmer helloSampler

However, I am interested in adding an on-screen keyboard to play the sampled sound in addition to the midi functionality as shown here (similar to how most vst plug-ins also have on-screen keyboards)

Does anyone happen to know how to go about doing this?

Upon looking at the Build A Midi Synthesizer Tutorial, it seems that this code excerpt, in particular line [4], the keyboardState.processNextMidiBuffer has something to do with this.

In the program provided by the instructions from the youtube video, it seems that this particular function is where I must receive input from the keyboard component to generate audio.

Screenshot 2024-06-20 004332
Screenshot 2024-06-20 0043322354×373 74.9 KB

I’m not too sure how to go about editing the provided templates to create that on-screen keyboard functionality.

2

I’m not sure about the problem but if you process the midikeyboardstate, it will add the keyboard events to the midi messages so you can pass them to the sampler

keyboardState.processNextMidiBuffer(midiMessages, 0, buffer.getNumSamples(), true);
sampler.renderNextBlock(buffer, midiMessages, 0, buffer.getNumSamples());
1 Like
3

adding an on-screen keyboard

Have you seen the MIDI Demo (in the Audio section) of the DemoRunner application? It’s pretty self-explanatory how to add the MIDI Keyboard component to your project …

//==============================================================================
class MidiDemo final : public Component,
                       private MidiKeyboardState::Listener,
                       private MidiInputCallback,
                       private AsyncUpdater
{
public:
    //==============================================================================
    MidiDemo()
        : midiKeyboard       (keyboardState, MidiKeyboardComponent::horizontalKeyboard),
          midiInputSelector  (new MidiDeviceListBox ("Midi Input Selector",  *this, true)),
          midiOutputSelector (new MidiDeviceListBox ("Midi Output Selector", *this, false))
    {
... // etc

Failing that, you may benefit also by using a virtual midi keyboard application … which would allow you to test MIDI receive capabilities in your project without having to do too much GUI work, if that’s a priority …

1 Like
4

The two answers you guys provided, when put together, make the keyboard work perfectly!! Thank you to the both of you! Turns out I had to

  1. put the midiKeyboard member in the editor and make it visible there + fill in the resize function for the midiKeyboard
  2. put the midiKeyboardState member in the processor and create a getter for its reference
  3. make the plugineditor inherit the constructor from midiKeyboard as shown in ibisium’s answer (this is where the midiKeyboardState& getter comes in handy so we can fill out that field in the constructor for midiKeyboard)
  4. add in the line as shown in marcusonic’s answer into the AudioProcessor::processblock function

You guys have no idea how relieved I am that this works, I’m really so grateful for your insight :')

THANK YOU

5

You’re welcome! Pay it forward. :slight_smile: I’ve had my own work propelled into the future by folks answering my questions too, I know how valuable it is to get a lift-up … and it should be noted that isn’t my code, per se, I just copied it from the DemoRunner for you - I hope you will consider consulting DemoRunner for further issues like this, it truly is a very valuable resource.

1 Like