[skratchdot.]


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:

Launchpad

Step 2: Show MIDI Studio

Once Audio MIDI Setup is open, you can open the Midi Studio window:

Midi Studio

Step 3: Open IAC Driver

Now you can open IAC Driver (Inter Application Communications Driver) by double clicking on the icon:

IAC Driver

Which opens this window:

IAC Driver 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:

IAC Driver Finished

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

MidiKeys - Install

Now that MidiKeys is installed, you can open it via Launchpad:

MidiKeys - Launchpad

Once the program is opened, make sure to choose "IAC Drive: WebMidi" from the "Destination" dropdown:

MidiKeys - Usage

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!

Tagged with: JavascriptAudioMIDIWebTutorial