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:
You an build your own MIDI controllers or self-contained creations using single-board computers and single-board microcontrollers such as these:
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.