Making Your Own Musical Instruments with P5.js, Arduino, and WebMIDI

4 min readOct 23, 2018

The Creatability experiments, which include several musical instruments, a text-to-musical-speech toy and a music-to-visuals tool, offer a range of input and output modes for people to choose from. Having multiple interaction modes can make creative coding projects more accessible, expressive, or engaging; designing them often leads to new ideas and inquiry paths. We hope these experiments will inspire you to explore multiple interaction modes in your own projects.

The experiments in Creatability have multiple outputs: when Word Synth plays a sound, it also draws a waveform; when you draw a line on Sound Canvas, you can also play it back as a sound. Keyboard and Sampler also make it easy to expand their outputs beyond the computer: we can have them control instruments in the physical world. Here is a quick experiment I made, where I sway my head to play a tambourine, a water bottle, a triangle and a bowl (A.K.A. a drum set of whatever sound-making objects I had laying around):

This relies on Chrome’s support of webMIDI, which allows musical devices to communicate with each other. To set up the experiment in the video, I simply connected Sampler’s MIDI output to a dadamachines kit, which takes MIDI messages and triggers solenoids in response.

Image description: a screenshot of the Sampler interface, showing the MIDI Out dropdown. The option “Dadamachines Automat” is selected

Creating your own instruments

You can also create your own browser-to-solenoid system with p5.js and an Arduino. Making your own system has great creative potential because it gives you control of both the digital and the physical interfaces. For example, you might use your ankle to kick a sound, try playing structures of wine glasses and mate gourds, or play patterns that respond to the latest news or the weather.

Image description: A mosaic of animated gifs showing solenoids hitting a triangle, a ceramic bowl, a tambourine and a water bottle.

Make your own mechanic drum

In this post, I will show you how to set up a webpage with one button that, when clicked, hits a physical drum. Once you have this minimal system working, you can expand it to your heart’s content.

Overview

Send a MIDI message from Chrome. Create a webpage with one button that sends a MIDI message when clicked.
Receive the MIDI message in Arduino. Have the Arduino receive that message and light up an LED in response.
Trigger the Solenoid. Assemble a circuit to trigger a solenoid from the Arduino.

What you will need

A computer running Chrome, with access to the Internet (to get the code).
An Arduino MKZero board and a USB cable.
A Solenoid like this one.
A power supply. Two 9V batteries will suffice.
A transistor (TIP120), a resistor (2.2kOhm) and a diode (1N4006).
A breadboard and jumper wires.

1. Send a MIDI message from Chrome

This p5 sketch has one HTML button that sends a MIDI noteOn message when clicked, and a noteOff message half a second later.

Connect your Arduino to your computer and run the p5 sketch: you should see your Arduino show up on the console, along with any other available devices.

Image description: a screenshot of the p5 editor

Set your MIDI output to the Arduino name that appears on the console (see line 35 on the sketch).

2. Receive the MIDI message in Arduino

This Arduino code receives note on / note off messages and turns its built-in LED on or off in response. It also prints out the message to its Serial port, which can helpful for troubleshooting.

Upload the code to your board, play the p5 sketch from Step 1, and click its button. You should see a tiny LED light up on your Arduino board.

3. Trigger the Solenoid

Assemble your circuit following the diagram below.

Once you have your circuit, upload this Arduino code to your board. It will send HIGH and LOW signals to the solenoid in response to MIDI messages noteOn and noteOff, just like it did for the LED on Step 2.