Search code examples
javascriptmacosmidiweb-midi

how to connect Web Midi API to native application (like Ableton live)

[If there is a better place to ask this question, please let me know!]

Note: I'm on a Mac.

I have successfully connected a MIDI keyboard with my browser (Chrome), using the Web MIDI API.

I am wondering if I can also hook up applications (like Ableton Live), so that, when Ableton outputs MIDI messages, these messages can be received by the browser?

Options I see:

  1. Send Midi from Ableton to my MIDI keyboard, which forwards them to the Web MIDI API (can anybody shed some light on how this can be set up?)
  2. Use the IAC (Inter-application communication) Driver in Mac OS, that "allows you to create virtual MIDI cables between applications inside the box, so to speak." I have no idea how to set this up, because 'web midi api' does not show up in Midi Studio.

I would prefer option 2, so that this would also work when no physical MIDI device is present, but I would also be happy to learn if option 1 could work!

Thanks for any input on this!

Solution

  • I found the documentation for the Web MIDI API a bit confusing, so I tried webmidi instead (it's built on top of the Web MIDI API, so everything it does should be implementable using the "raw" API as well).

    To receive MIDI messages, this works for me:

    WebMidi.enable(function(err) {
  if (err) throw err;
  console.log("WebMidi enabled!");
  WebMidi.getInputByName('IAC Driver Bus 1').addListener('noteon', 'all', function(e) {
    console.log('note on', e);
  });
});

    In Ableton, "Midi To" needs to point to the IAC device (if it doesn't show up, you may need to open the MIDI preferences and enable it as an output device):

    MIDI output

    Caveat: I found that this only works for MIDI tracks that don't have any instruments attached to them (see this page).

    EDIT: I assume that the device is named similarly on your Mac, otherwise here's the code I used to enumerate input and output devices:

    WebMidi.enable(function(err) {
  if (err) throw err;
  WebMidi.inputs.forEach(input => {
    console.log('- id  :', input.id);
    console.log('- name:', input.name);
    console.log('- manu:', input.manufacturer);
    console.log('- conn:', input.connection);
    console.log('---');
  });
  console.log('outputs:', WebMidi.outputs);
  WebMidi.outputs.forEach(output => {
    console.log('- id  :', output.id);
    console.log('- name:', output.name);
    console.log('- manu:', output.manufacturer);
    console.log('- conn:', output.connection);
    console.log('---');
  });
});