Introduction
WebMidi is a technology that has been emerging for a few years now, and it's finally supported in Chrome by default. Even browsers that don't support it can use the WebMIDIAPIShim by Chris Wilson to add support. For a list of current support, check out caniuse.com.
If you are not a musician or audio hobbyist, you might not have any midi devices setup, and will not be able to get the full experience on websites that are starting to enable midi features.
Fear not, you can setup virtual midi devices that can be used on these websites. There are ways to do this on all operating systems. This tutorial is focused on OSX, but Window users can check out tools like Midi Yoke, LoopBe1, Sony Virtual MIDI Router, or loopMIDI and Linux users can try ALSA or QJackCtl.
Creating Virtual MIDI Ports On OSX
Step 1: Open Audio MIDI Setup
You can open Audio MIDI Setup by searching Spotlight, by looking in /Applications/Utilities/, or by using Launchpad:
Step 2: Show MIDI Studio
Once Audio MIDI Setup is open, you can open the Midi Studio window:
Step 3: Open IAC Driver
Now you can open IAC Driver (Inter Application Communications Driver) by double clicking on the icon:
Which opens this window:
Step 4: Add Virtual Port
- Click the "Add and Remove Ports Button"
- A new port called "IAC Bus 2" will be added.
- Rename the port to "WebMidi" by clicking on the port you want to rename
- IMPORTANT: Make sure to check the "Device is online" box at the top.
After making the following changes you should see:
Now that you have your virtual driver / port setup, you can install / use a virtual MIDI keyboard on your favorite WebMidi enabled website. For instructions on installing a Virtual MIDI Keyboard, continue reading below.
Install / Use a Virtual MIDI Keyboard
A few options:
Since I use homebrew with cask, I'm going to install midikeys. You can do this by opening your command line, and running:
brew cask install midikeys
Now that MidiKeys is installed, you can open it via Launchpad:
Once the program is opened, make sure to choose "IAC Drive: WebMidi" from the "Destination" dropdown:
You can now click on keys from that virtual keyboard to send MIDI events to the WebMidi virtual port you created earlier.
There are other options for virtual keyboards / software, but this is a quick way to get up and running. More advanced users can try out programs like Pure Data by running
brew cask install pd
and creating their own virtual midi keyboard / instrument for usage with WebMidi.
Better yet, create your own WebMidi instrument that sends output to other WebMidi enabled devices!