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!
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.