Search code examples
javascriptmacosmidiweb-midi

How to get web midi output controller to work?


So I have a midi controller connected to my machine, and I have it playing successfully with Logic Pro X on a mac.

I'm trying with Web Midi API to send a note to this midi controller, as an output device with the hope that it'll trigger the midi controller which will in turn trigger the sound via Logic.

I'm using webmidi.js for this and I tried:

WebMidi.enable(function (err) {

  if (err) {
    console.log("WebMidi could not be enabled.", err);
  } else {
    console.log("WebMidi enabled!");
      console.log(WebMidi.inputs);
    console.log(WebMidi.outputs);
    var output = WebMidi.outputs[0];
    output.playNote("C3");
  }

});

yet I don't hear the note playing. I did make sure that my midi controller is listed as an output device.

The weird thing is when I playNote it actually lights up the LED key on the controller. But I still don't hear the sound. I also tried a different controller that doesn't have leds on the keys, but I also don't hear a sound.

I also tried going to this website http://webmidi-examples.glitch.me/ that on the last example also tries to send midi output but doesn't work either. Any suggestions?


Solution

  • The only way to do this I found was to create a virtual midi device as output, and use this virtual midi device as input in my daw. Then use the code above but select the output as this new virtual midi device.

    Steps on Mac:
    1. Audio Midi Setup -> Window -> Show Midi Studio. 2. In Midi Studio Double Click IAC Driver -> Create New Virtual Midi device with + Button on bottom left corner of screen. Check "Device is Online".

    Go to DAW of your choice and change the input to this new midi device. Now in javascript, using the code above, change to the new output:

    var output = WebMidi.outputs[1]; // whatever index your virtual midi device is
    

    Now it works.

    From my experience I didn't need to enable sysex nor use https for this to work. I was just running the html on localhost on my node.js/express server.