DEV Community

Cover image for One Byte Explainer: Web MIDI API 🎹
Sergi Miral
Sergi Miral

Posted on

One Byte Explainer: Web MIDI API 🎹

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

The Web MIDI API connects browsers to MIDI devices, enabling interactive music creation and control directly in web apps. With user permission, it turns your browser into a versatile musical instrument or controller hub.

Additional Context

A few years ago I built allthemidi, a suite of WYSIWYG apps to build custom MIDI controllers, leveraging the Web MIDI API for its core functionality.

My goal was to make it available as an iOS app for my iPad. However, due to Safari's lack of support for this API at the time, I had to engineer a workaround that facilitated communication between the browser and the native client.

Building the the bridge between JS to Obj-C/Swift bridge was challenging but once I figured it out it was music to my ears 🎹🎶🥳 I ended up publishing different apps for each controller type (knobs, faders, pads & toggles).

allthemidi_iPad_apps

The iOS apps are not available in the AppStore anymore simply to avoid the yearly developer's license. For now you can enjoy the web version

Top comments (0)