Specifications :

Thanks to WAM, we will easily host a simple MIDI virtual keyboard and use the OBXD synthesizer. See the MIDI section in the wiki of the Web Audio Modules.

Prerequisites :

To make our host communicates with the plugin, we will use the SDK of Web Audio Modules. You can either download the full source and build it on your own, or use the pre-build version.

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);

    ...
})();

In order to make sound with the OBXD synthesizer, we have to create a gain node. This gain node is connected to the output destination, and receive in output the sound from the synthesizer. The input of the obxd synthesizer is connected to the keyboard. Then, thanks to WAM, we can add to the synthesizer, the event handler of midi events with the connectEvents method.

Conclusion :

We've seen how to connect a keyboard to a synthesizer with Web Audio Modules.

In a next step, we will see how to create a piano roll, and how to store the wam midi events.