Maximize WebMIDI Browser Support

keybaudio
keybaudio
Apr 21 · 3 min read
Expanding WebMIDI browser support

A quick look at caniuse.com shows that WebMIDI is not yet widely supported. What steps can we take to improve that?

As with most new web technologies and APIs, it can take a while for support to come to all major browsers. This often creates problems for developers who whilst wanting to target the greatest percentage of users, still want to take advantage of newer features and create the next generation of web applications. Fortunately, there are usually options to bridge the gap and save the day! The most common of which, is the mighty shim or polyfill.

So what’s a shim? In the world of computers, a shim is typically a piece of middleware that glues old and new together, seamlessly connecting and translating currently unsupported or altered interfaces to an old solution or workaround. Whereas a polyfill is an implementation of a currently unsupported feature using code or plugins before it becomes natively, or more widely, supported. Formally, “a polyfill is a shim for a browser API” and if you want to know more about the specifics, there are some wikipedia links in the quote to relevant pages.

Technobabble aside, the good news is that WebMIDI currently has a shim/polyfill in place to massively expand browser support and allow WebMIDI applications to run on more browsers and operating systems than you’d initially think possible. Chris Wilson and WebMIDIAPIShim saves the day!

Using the shim/polyfill is pretty straightforward, the most important step being that you include the javascript source code before any of your own that attempts to make WebMIDI calls. The github page includes a build folder with minified versions of the source and a readme that make this integration easy.

The last few things you can do to increase browser compatibility are as follows… First, make sure you gracefully handle the absence of expected functionality and test that it’s there to begin with. If it isn’t, be sure to let the user know their options — installing a plugin or upgrading their browser for example. In code this might look something like this:

Lastly, being aware that there is WebMIDI support in older browsers, but that the API changed slightly since, can allow you to code a little more defensively and handle the cases where there is support, but oddities to work around.

What changed and what does this look like for your code? The biggest change was to the enumeration of input and output ports. At one point in time it was simply an array returned by a function call, now it is a map structure that needs to be enumerated.

So in summary, use a shim/polyfill and instruct users to install the Jazz-Plugin (or migrate to a supported browser) if they don’t seem to have support just yet. In time, WebMIDI will become commonplace and be included in all browsers natively.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade