Cross-platform development is a notoriously difficult task that can be tackled from a number of different directions. There’s a plethora of cross-platform frameworks available, but most tend to be bulky and difficult to use. Websites, on the other hand, are inherently cross-platform; web developers are more concerned with cross-browser support than cross-platform support.
What if we could avoid the cross-platform issue altogether by developing our applications on the web? Although this is a great idea in principle, it’s thwarted by the lack of MIDI support in most of today’s web browsers. MIDI is an old and established technical standard that allows electronic music devices, computers and related devices to communicate; without it, a website has very little hope of talking to any such musical devices.
The arrival of Web MIDI (sort of)
In early 2013, W3C, the main international standards organization for the internet, introduced the Web MIDI API (http://webaudio.github.io/web-midi-api/). However, this in itself is not enough: the API must be implemented in at least one browser before it can be used at all, and must be fully supported in most browsers before it can be deemed acceptable for public use. This is clearly a problem; to date, Chrome Canary, the bleeding-edge verion of Chrome, is the only browser that supports the Web MIDI API.
Soon after the arrival of the Web MIDI API, the folks over at Jazz Soft (http://jazz-soft.net/) developed Jazz-plugin to provide Web MIDI support in most browsers. Jazz-plugin works extremely well and can be used to communicate reliably with MIDI devices. Our work wouldn’t have been possible without Jazz-plugin, so we’re very grateful for their efforts! However, asking a user to install a plugin before they visit your website is not a particularly attractive prospect. At this point, the future of our cross-platform, MIDI-enabled web application looked bleak.
Enter Chromium Embedded Framework
What if we could bundle our web application with Jazz-plugin, then distribute it to users as a download? The folks at Jazz Soft graciously provided Jazz-plugin under an open licence, so we knew that bundling the plugin would not pose any legal problems. After a little research, we came across Chromium Embedded Framework (CEF), an open-source, cross-platform project that provides web browser support across a range of languages. If CEF could be packaged with Jazz-plugin, then it might satisfy our requirements for a cross-platform, web-based, MIDI-enabled solution. Of course, the user would still be downloading a file, but it would be the entire bundled application rather than a 3rd party plugin.
CEF, although bulky and largely undocumented, proved to be exactly what we needed. However, we were still faced with a lot of unanswered questions. Might there be problems integrating Jazz-plugin with CEF? Would users expect functionality typical of a compiled application that is simply not available in a web browser? Are there security considerations? Will the web source files be exposed? Would CEF and Jazz-plugin work well on all operating systems?
Example application: Launch Control Editor
When designing the Launch Control (http://uk.novationmusic.com/midi-controllers-digital-dj/launch-control), we decided that users should be able to customize templates on their hardware. This needed an editor: something lightweight, simple, cross-platform and easy to use — an excellent candidate for CEF + Jazz-plugin! The application itself is relatively straightforward: the user can choose various properties for each of the hardware controls, and can also save/load templates. All communication between the device and the application is via SysEx messages.
Over the next few weeks we began to design and implement this functionality using CEF and Jazz-plugin. We used Eli Grey’s FileSaver.js (https://github.com/eligrey/FileSaver.js/) to simplify the saving of templates to the file system, and abudaan’s JazzMIDIBridge (https://github.com/abudaan/JazzMIDIBridge) to simplify MIDI device connections. Most of the functionality was developed and tested in a browser (Chrome), rather than through the CEF wrapper. Although this sped up the development cycle considerably, it did lead to one or two unexpected surprises.
Issues and pitfalls
The in-browser development cycle highlighted one major issue: that the behaviour of a web page depends on its environment (web developers are of course acutely aware of this fact!). On several occasions we developed and tested a feature in the browser, only to discover that the it behaved differently — or didn’t work at all — when wrapped in the CEF framework.
Under the Web MIDI API, connecting/disconnecting a MIDI device to the host computer does not trigger a connection/disconnection callback; instead, the system must be polled regularly to see if the number of connected MIDI devices has changed. Although this isn’t a show-stopper, it’s an annoyance that could present problems when connecting/disconnecting multiple devices quickly.
Another issue is security: the web files wrapped by CEF aren’t compiled into the application, which means the user can potential discover (and modify!) the files. The folks at Spotify were probably faced with the same problem as they use CEF, so I presume it’s fixable somehow. This also means the files have to be stored somewhere; this isn’t a problem on Mac OS X, but on Windows an installer is needed to place the files in a particular location. Again, this isn’t a show-stopper, but it’s at odds with the ‘easy to use’ design goal.
One of the most important issues we encountered was with Windows 8: Jazz-plugin was not being made aware when devices had been connected or disconnected, so the user must restart the application when a device is added/removed. Whether this is a problem with CEF, Jazz-plugin or the Web MIDI API, we’re not sure. Unfortunately we didn’t have the time to look into the issue further, but one day we may get back to it!
What’s next?
Combining CEF with Jazz-plugin provided a short-term solution to the longer-term problem of support for Web MIDI API in web browsers. When (if!) all browsers support the Web MIDI API, we’ll be able to migrate the Launch Control Editor (and any future similar products) to a purely web interface. If, on the other hand, the Web MIDI API is never supported in most browsers, this CEF + Jazz-plugin alternative provides a largely acceptable cross-platform approach for small-to-medium-sized applications.
The potential for Web MIDI is massive, and there are already a number of innovative applications available. Imagine web-based piano tutors, music games, synthesizers with built-in mappings for different MIDI devices, and firmware updaters. The last of these is particularly appealing; imagine a section of the Novation website that would detect what MIDI devices are connected, and then update the firmware on each device automagically!
MIDI is an established protocol that’s not going to disappear anytime soon. Support for MIDI in web browsers is sure to bring an exciting new wave of music apps on the web — something everyone can look forward to!
Focusrite Development 