MIDI Keyboard. Photo by Cedrik Malabanan on Unsplash

Changes in Web MIDI API in Chrome in 2019

What to do to make sure your app will still work

Kacper Kula
Jul 22 · 3 min read

If you’ve been playing with Web MIDI API recently you might have seen the new warning that appears every time you run navigator.requestMIDIAccess().

New warning in Chrome Developer tools

[Deprecation] Web MIDI will ask a permission to use even if the sysex is not specified in the MIDIOptions since M75, around June 2019. See https://www.chromestatus.com/feature/5138066234671104 for more details.

What is sysex?

Sysex is an abbreviation for System Exclusive Messages. These are special type of messages that let you configure your MIDI device. Some synthesizers accepts uses as a configuration protocol, it allows to configure them or upload the patches to their memory.

Such data is usually stored in files with .syx extension but you can also use JavaScript (or any other language) to programmatically write them to.

This is the message that user will see when your app will try to access MIDI device.

Because these operations are usually persistent and can reconfigure the device, Chrome was always asking user for permission to perform such actions. Now Chrome will explicitly require user to grant permissions even if we do not use sysex.

Should I worry?

The change is not included in M75 and M76 (the latest version at the time of writing) but it will probably land in Chrome eventually. If you have a project that uses Web MIDI API you will have to do the following:

  • Make sure you serve your page over HTTPS
  • Make sure you provide a good experience when user does not allow MIDI to be used

Serving over HTTPS

Because Web MIDI API will now ask for permissions, any app using it will have to be served over HTTPS. Chrome’s permission requiring feature is available only on secure origins so effectively only on these the MIDI API will be allowed.

Secure origin is any page that follows one of the following formats:

(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, — )
(chrome-extension, *, — )

This means you can still use Web MIDI API in Chrome Extensions, on pages server over HTTPS and when developing locally. On the rest it won’t work and the promise returned by navigator.requestMIDIAccess will get rejected with DOMException: An attempt was made to break through the security policy of the user agent.

Provide good user experience when user rejects access

Before, you didn’t have to care about user rejecting access to the MIDI interface. Now it can happen, so it would be good to react when it happens. If access to MIDI is not vital for you app to work, it would be great to allow users to access all other functionality. If the MIDI access is fundamental for your app to work, it would be great to inform users why is so and allow them to retrigger the permission dialog.

Reference

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