Give Web Developers a Code Editor and a Trumpet, What Happens?

Not What I Expected: My Web-Midi Demo in This Year’s Chrome Dev Summit

It all began when I failed to build a Trumpet Playing Robot in Geekcon. Shortly after, I was invited to present a demo at the Chrome Dev Summit, and thought this would be a great opportunity to explore a new API I always wanted to play with (literally) — Web MIDI. The result was not quite what I was expecting, as you will shortly discover.

MIDI Keyboard and a light bulb?! Read on to find out

This Is Not Going To Work!

After explaining the situation in short, I presented them with two options:

There Was No User Interface

I spent so much time getting the hardware to work that I totally neglected the user interface part. I only had a simple web page that provided a piano-like interface:

Even wondered how to create a piano keyboard in HTML? Check out the source code

The Best User-Interface for Developers, Code Editor

The goal of the project was to educate developers about the Web MIDI API, so it made a lot of sense to show them the JavaScript code that powered the demo. But then I thought — why only see the code?

Exploring new APIs is a breeze with auto complete
Setting up in the hotel room: 2 artificial fingers ready, one more to go!

The Conference Day

Finally, the big day has arrived!

Debugging is always more effective with your eyes closed

A MIDI Keyboard

My friend Lars Knudsen also attended the conference, and as he knew about my project, he decided to surprise me and brought a MIDI keyboard 🎹. Then came the brilliant idea of creating a JavaScript code snippet that would connect the keyboard with the trumpet — You play the keyboard, get the sound out of the trumpet:

Lines 9–10 are where the magic happens
Ken Franquiero playing Doom E1M1 on the trumpet using with Midi Keyboard 🎶

MIDI All Things!

But it didn’t stop there. He also “happened” to have a MIDI Saxophone (I didn’t even know such thing exists), so he connected it too, and now he could play the Saxophone and get the sound out of the trumpet:

Ruth trying to figure out how to connect her MIDI device to the demo

Developers with Code Editor and Trumpet 👩‍💻🎺

When I wrote the “Web MIDI Playground”, the code editor for my demo, I included a sample code snippet that plays a few notes, so others could use it as a starting point. Lars took the opportunity to code “Hava Nagila”, which you can listen to in the online simulator.

Pair programming is always more fun! 🎶
This was the first program she wrote especially for her baby! Check out the code

Developers Love Abstractions

Markus was a Swiss guy I met in Espruino forums after sharing the experience of bringing back a fried Espruino board from the dead. After he learned about my project, he volunteered to help with manning the booth during the event.

Somehow an “Edge” sticker made it to the electronics box of the project
Markus‘s musical notation format: Note name and octave, followed by duration and lyrics

Abstracting Away The Code Editor

He spent about an half an hour writing a “Composer” snippet, that would record whatever you played on the keyboard, and would spit out code that plays the same thing. You could then copy this code and save it in your own snippet.

Let There Be… Light!

We wrote a short piece of code that uses Web Bluetooth to connect to the bulb and light it whenever you played a note. About 15 minutes later, he had this working:

Web MIDI and Web Bluetooth working together!

Developers Are Full of Surprises

When I started working on this project, I didn’t really know what to expect. Projects presented at conferences are usually watch-only or have limited ways you can interact with them (like the T-Rex game last year). This time, I gave the attendees the full power of a code editor, and I wasn’t sure where they will take it.

Google Developer Expert for Web Technologies, Maker and Public Speaker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store