One Byte Explainer: Web MIDI API 🎹

#frontendchallenge #devchallenge #javascript #webdev

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

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 ✨

Your AI Code Assistant

Implement features, document your code, or refactor your projects.
Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE