You can interact with any Web MIDI app using a Circuit Playground Express programmed to function as a basic MIDI controller. This project uses the Circuit Playground Express's built-in buttons and light sensor to trigger notes and modulation control.

What you'll need

Circuit Playground Express is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and...
$24.95
In Stock
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or...
$2.95
In Stock

Arduino IDE setup

Follow the steps on this page to download and install the Arduino IDE & support for Adafruit boards on your computer. Then install support for the Circuit Playground Express by following the steps here.

Once installed, open Arduino and choose Tools -> Sketch -> Manage Libraries from the top menu. In the new window that appears, type MIDIUSB in the search field. Select the MIDIUSB library from the results and install the latest version.

Code

Create a new sketch in Arduino and delete the starter code that appears inside of it. Copy the code seen below, paste it into that new blank sketch and save it.

Download: file
#include <Adafruit_CircuitPlayground.h>
#include "MIDIUSB.h"

bool leftButtonPressed;
bool rightButtonPressed;
bool noteOneOn;
bool noteTwoOn;

void setup() {
  CircuitPlayground.begin();
}

void loop() {
  
  leftButtonPressed = CircuitPlayground.leftButton();
  rightButtonPressed = CircuitPlayground.rightButton();

  //Control note one based on left button
  if (leftButtonPressed && !noteOneOn) {
    noteOn(0, 60, 100);
    noteOneOn = true;
  } 
  else if (!leftButtonPressed && noteOneOn) {
    noteOff(0, 60, 100);
    noteOneOn = false;
  }

  //Control note two based on right button
  if (rightButtonPressed && !noteTwoOn) {
    noteOn(0, 64, 100);
    noteTwoOn = true;
  } 
  else if (!rightButtonPressed && noteTwoOn){
    noteOff(0, 64, 100);
    noteTwoOn = false;
  }

  //Use light sensor as a modulation control
  int value = CircuitPlayground.lightSensor();  //value from 0-1024
  value = value/8;  //scale to 0-127 for MIDI CC
  controlChange(0, 1, value); //send as MIDI modulation control
  
}

void noteOn(byte channel, byte pitch, byte velocity) {
  midiEventPacket_t noteOn = {0x09, 0x90 | channel, pitch, velocity};
  MidiUSB.sendMIDI(noteOn);
}

void noteOff(byte channel, byte pitch, byte velocity) {
  midiEventPacket_t noteOff = {0x08, 0x80 | channel, pitch, velocity};
  MidiUSB.sendMIDI(noteOff);
}

void controlChange(byte channel, byte control, byte value) {
  midiEventPacket_t event = {0x0B, 0xB0 | channel, control, value};
  MidiUSB.sendMIDI(event);
}

Connect Circuit Playground Express to your computer using a micro USB cable.

In Arduino's top menu, go to Tools -> Board, and choose Adafruit Circuit Playground Express from the list. Then go to Tools -> Port and choose the port which includes (Adafruit Circuit Playground Express) in the name.

Upload the code to your board by going to Sketch -> Upload, or pressing the Upload button in the sketch window.

Play

Install Google Chrome on your computer, if you don't have it already. Launch Chrome and open the Web Audio Synthesizer by going to the following address: 

https://webaudiodemos.appspot.com/midi-synth/index.html

Each of Circuit Playground Express's two main buttons will trigger a note to play on the synthesizer and the light sensor is used as a modulation controller - wave your hand over the light sensor to modulate a note's sound.

This guide was first published on Dec 04, 2018. It was last updated on Dec 04, 2018.

This page (Simple MIDI Controller) was last updated on Nov 06, 2020.