Editor's note December 2023: this page previously lived it midi.mand.is. Pieces of it are incomplete and broken, but I will try to restore it over time if/as I can.
You can watch this version of my talk from JSFoo 2017 to get a sense of the topic:
The code is open-source and can be found here on GitHub: github.com/georgemandis/circuit-playground-midi-multi-tool
You can upload it to your Circuit Playground using the Arduino IDE.
If you don't own one I recommend the Circuit Playground Express Developer Edition Base Kit for around $30USD. If you want to save a little, the Circuit Playground Classic works just as well for this project and only costs $20 — the biggest difference is you can't run CircuitPython on this model, but that's not applicable for our MIDI project.
For an in-depth look at the WebMIDI API and how it works please read the article I wrote for CSS Tricks: Dip Your Toes Into Hardware With WebMIDI.
Libraries and tools used to build my demos:
- MIDIVal (TypeScript!)
Other WebMIDI Resources
- WebMIDI API Shim (For browsers that don't yet support WebMIDI natively)
MIDI + JS on the Server
MIDI + JS in the Browser
Tiny Computers & Controllers
You an build your own MIDI controllers or self-contained creations using single-board computers and single-board microcontrollers such as these:
Recommended Off-the-Shelf MIDI Controllers
- nanoKEY2 KEYBOARD
- Novation Launchpad
- Novation Launchpad MK2 (Colors!)
- Novation Launchpad MK2 Documentation
- Logidy UMI3
- Hot Hand MIDI USB
- Behringer FCB1010 (You'll need a USB-to-MIDI cable)
- AlphaSphere (Expensive, but very cool!)
Other Places to Find MIDI Controllers
Some of these demos are from my talk and others are just general experiments and art projects I've created using this stack.
Puck.js BLE MIDI Clicker
This is the software driving my Puck as I use it as a "clicker" on stage while giving my talks. It can send 3 different MIDI control change messages depending on the type of click: single, double or triple.
This demo was inspired by a talk I saw at FullStack London 2017. There is a blog post and a video that better explains what's going on.