Specifications :

We will need to use the Web Audio Modules SDK, to import and connect the piano roll to the synthesizer. As the example 6 with the simple MIDI Keyboard, we will instantiate the OBXD plugin and a piano roll.

Prerequisites :

To make this example, we will use a Web Audio Modules plugin developed by Tom Burns. You can find the code of the piano roll in his github's repository.

Connection of the plugins :

// index.js

(async () => {
    ...

    let gain = audioCtx.createGain();

    let keyboardInstance = await WAM1.createInstance(hostGroupId, audioCtx);
    let keyboardDom = await keyboardInstance.createGui();

    let obxdInstance = await WAM2.createInstance(hostGroupId, audioCtx);
    let pluginDom2 = await obxdInstance.createGui();

    obxdInstance.audioNode.connect(gain).connect(audioCtx.destination);
    obxdInstance.audioNode.connect(keyboardInstance.audioNode);
    keyboardInstance.audioNode.connectEvents(obxdInstance.instanceId);

    ...
})();

As in the previous example, the connection between the keyboard and the synthesizer is similar. As the piano roll will send to the synthesizer MIDI events, we need to connect the plugins for handling this type of event.

Sending custom data to the processor with wam-transport :

// index.js

(async () => {
    ...

    btnStart.onclick = () => {
        if (audioCtx.state === "running") {
            audioCtx.suspend();
            btnStart.textContent = "Start";
        } else {
            audioCtx.resume();
            btnStart.textContent = "Stop";
            
            keyboardInstance.audioNode.scheduleEvents({
                type: 'wam-transport', data: {
                    playing: true,
                    timeSigDenominator: 4,
                    timeSigNumerator: 4,
                    currentBar: 0,
                    currentBarStarted: audioCtx.currentTime,
                    tempo: 120
                }
            })
        }
    }

    ...
})();

Whenever you need to send custom data to your processor, you can use the special type events wam-transport. The piano roll uses special information to work as: if it's currently playing or not, the time signature, the note bar of the piano roll, the tempo, and the current audio context time. That's all, we are ready to use the plugin in our application.

Conclusion :

We've seen how to easily build an application that uses special events for the piano roll.

Special thanks to Tom Burns that helped me to create this example with his piano roll.