More Than Music with MIDI, JavaScript & Tiny Computers

Learn about building hardware-interactive webpages using JavaScript, MIDI & a standard Chrome browser.

Practice (Workshop)

Abstract

Tiny computers such as the RaspberryPi have finally reached a level of performance and affordability that makes hardware experimenting accessible to everyone. At the same time, JavaScript has become the lingua franca of web programming and can be found beyond the browser.

What if I told you there was a mature protocol from 1983 that was uniquely poised to take advantage of this?

Meet MIDI!

MIDI is a niche protocol designed for musical instruments to talk to each other. It's event-oriented approach to messages feels at home in the async world of JavaScript & Node. More excitingly, Chrome "speaks" MIDI natively thanks to the WebMIDI API and W3C specification.

This unlikely tech stack — Tiny Computers + JavaScript + MIDI — can lend itself to creative programming beyond music. In this workshop will explore MIDI hardware interaction through JavaScript and how it can be used in conjunction with other browser APIs to build creative and interesting things.

If you have a Circuit Playground at home you can try the demos and read material from the workshop here:

http://spa2018.mand.is

Audience background

Required: A beginning to intermediate understanding of JavaScript and working with basic browser APIs.

Helpful but not required: basic understanding of what MIDI is and experience with hackable hardware — Arduinos, Espruino, etc.

Benefits of participating

Participants will come away with a working knowledge of a very niche spec, how to build real-world, interactive things using standard web technologies and a basic introduction to the world of programmable hardware.

Materials provided

A pre-programmed, versatile MIDI controller will be provided (Adafruit Circuit Playground). Participants will need a computer, browser and text editor.

Process

The session will begin with an overview of what MIDI is, how the JavaScript WebMIDI API interacts with it and explore the "non-musical" ways this protocol can be used.. We will build a "hello world" JavaScript MIDI app using provided hardware and explore the different input/output modes available on the provided hardware. Attendees can work solo or in groups. At the end of the workshop we will demonstrate the interactive pieces we've constructed and discuss possible practical, "real-world" applications for this unusual tech stack.

Detailed timetable

0:00 - 00:15: Introduction to MIDI, JavaScript and the WebMIDI Api
0:15- - 00:25: Demonstrations of "non-musical" apps built using this tech stack
00:25 - 00:45: Building a "hello world" WebMIDI application together
00:45 - 01:45: Guided time for participants to start building a WebMIDI project of their choosing using provided hardware. Ideas will be provided but participants are encouraged to explore their own.
01:45 - 2:10: Presentation and discussion of attendee projects.
02:10 - 2:30: Quick recap of what we did, an overview of other ways this stack can be explored (hardware options, non-frontend, Node explorations) and discussion of possible "real-world" applications for this combination of technologies.

Outputs

At the end of the session attendees will have a hardware-interactive, frontend web-app that utilizes the WebMIDI protocol.

History

I gave an impromptu version of this workshop at JSFoo in Bangalore. I've given a general "talk" on this topic at many JavaScript conferences — HolyJS, OdessaJS, FullStack London, NEJS Conf, JSFoo, Voxxed Days Belgrade, DonutJS and JSConf Colombia.


Side note (I see no field for notes?): The hardware I would like to provide is $19 through Adafruit. I'd like attendees to be able to take this piece of hardware home with them when we are done. I'm happy to discuss this further with the organizers if my proposal is chosen.

Presenters

  1. George Mandis
    SnapTortoise