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.
JavaScript, MIDI & Tiny Computers
Getting Started
The resources on the page focus on building fun and interesting things using primarily JavaScript and MIDI. The "tiny computer" component — Arduinos, RaspberryPis, C.H.I.P. Computers, Espruinos and likely others — is not strictly required to explore or run most of the examples here.
This page is an ongoing reference/support page for my talks on JavaScript and MIDI. For more information please contact George Mandis. For future updates subscribe to /dev/random—a biweekly, tech-adjacent newsletter.
The Talk
You can watch this version of my talk from JSFoo 2017 to get a sense of the topic:
The Workshop
In this workshop based on we talk we build a custom MIDI controller using Adafruit's Circuit Playground controller and explore interacting with it in fun ways via JavaScript and the WebMIDI API. I've led this most recently at LibertyjS 2019, Teardown 2018 and SPA Software in Pratice 2018.
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.
The Article
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.
Working with JavaScript and MIDI
Libraries and tools used to build my demos:
- MIDIVal (TypeScript!)
- WebMIDI.js
- midifile
- MIDIUtils.js
- MainStage Scripter (JavaScript based MIDI programming)
- PeerjS
- Socket.io
Other WebMIDI Resources
- WebMIDI API Shim (For browsers that don't yet support WebMIDI natively)
MIDI + JS on the Server
- https://github.com/stevenleeg/launchpadder
- NPM packages: midifile / midi
MIDI + JS in the Browser
Chrome, Chromium and ChromeOS Support this natively! This means you can also create Electron apps that leverage JavaScript and MIDI.
For other browsers you can use the Jazz-Plugin to provide MIDI device access via JavaScript. The implementation differes from the W3C Web MIDI spec however, which all of the frontend examples on this page use. However you can use the WebMIDI API Shim as mentioned above to remedy this.
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
- LPD8
- 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
JavaScript + MIDI Demos
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.
Cellular Automata, JavaScript & MIDI
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.