1

I've been trying to understand how to use the Web MIDI API on chrome. I'm trying to follow the information on the MDN docs and I'm able to get information about the Virtual MIDI Piano Keyboard I have installed on my macOS.

Using the following code I can verify that I'm able to get the information about the MIDI device

navigator.requestMIDIAccess()
    .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) {
    console.log(midiAccess);

    var inputs = midiAccess.inputs;
    var outputs = midiAccess.outputs;
}

function onMIDIFailure() {
    console.log('Could not access your MIDI devices.');
}

But I don't get prompted to allow the website access to my MIDI device as I would expect.

I tried then to use the code snipped found on the MDN docs to get onmidimessage.

// Printing all messages to console
navigator.requestMIDIAccess().then(midiAccess => {
  Array.from(midiAccess.inputs).forEach(input => {
    input[1].onmidimessage = console.log;
  })
});

https://developer.mozilla.org/en-US/docs/Web/API/MIDIMessageEvent

I don't get any error, I can console.log(input[1]) and see results. But when I then hit the keys on the Virtual MIDI Piano Keyboard there is no activity, I'm not seeing anything logged to the console.

So I'm very confused and can't find any information about how to get this to work. Does anybody have any ideas on how to get the events from the MIDI device?

Einar Ólafsson
  • 3,036
  • 1
  • 19
  • 24
  • 1
    This is very interesting. The same thing happens when using Virtual MIDI Piano Keyboard and Opera. But the web-page app sees messages from MIDIkeyboard. Also, MIDI Monitor does not see anything from VMPK, but sees messages from MIDI keyboard. Maybe an older version of VMPK works better? – aMike Mar 21 '20 at 17:45

1 Answers1

0

If you are using a software instrument like vmpk, you'll need to configure the MIDI output to point to a recognized MIDI output destination on your machine (an IAC Driver if you are on Mac).

Using vmpk on Mac, getting MIDI message events to show up in my web MIDI project was as simple as doing the following in vmpk:

  1. Edit > MIDI Connections
  2. Change MIDI OUT Driver to "CoreMIDI"
  3. Change Output MIDI Connection to "IAC Driver Bus 1"

In the event that you have no connections to choose from yet (or you'd like to set up a dedicated bus for your purpose), you can configure a new MIDI bus on Mac using the Audio MIDI Setup application that ships with the OS. Instructions on how to do this here.

I learned of the need to use an intermediate MIDI bus for software instruments from this article on the topic.

H. Warren
  • 1
  • 3