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

More Than Music with Tiny Computers, MIDI and JavaScript 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:

Other WebMIDI Resources

MIDI + JS on the Server

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

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.