Let's Build Things!

Hello World

Let's familiarize ourselves with the API by learning how to:

  • Request MIDI access from the browser
  • Traverse the available devices
  • Setup listeners for devices registered as MIDI inputs
  • Send messages to devices registered as MIDI outputs

Here is a CodePen to get started:

Color Mixer

Using Mode #10 on our Circuit Playgrounds we'll manipulate the onboard RGB NeoPixel LEDs to mix colors using a web interface. We'll do this by sending "noteOn" messages to channels 1-3 for red, green and blue values respectively. In this mode the device is set to listen for status bytes from 144, 145 and 146 — "noteOn" messages for MIDI channels 1-3.

There is a CodePen setup to test this code here:

Because we're limited to two 7-bit messages instead of a single 8-bit message there's a curious "bug" with this approach... Can you identify it? Can you fix it?

Simple Synthesizer

For this project we'll build a basic synthesizer using WebMIDI, a web-based interface and the onboard speaker in our Circuit Playground using Mode 8.

Quiz Buzzer

Using Mode 7 let's turn our Circuit Playgrounds into buzzers that let a contestant "buzz-in" on a quiz show.

Can we connect multiple controllers and detect who's buzzes in first?

Morse Code Translator

This project can take two approaches. We can attempt to translate "taps" into Morse Code using Mode 7 or take phrases from a web interface and translate them into morse code signals using the onboard speaker.

Here is a helpful Gist that demonstrates a quick and simple Morse Code translator:

Fruit Piano

Using Mode 1 and alligator clips and fruit (or any conductive material!) we'll build an "alterantive" piano.


Using Mode 4 we can get the temperature in celsius using the onboard thermometer. Using this can we make a very localized "weather" app? If you're feeling ambitious, can you make it a self-contained application using Electron?

Tactile Flash Cards

Using principles from the previous Fruit Piano project, let's explore a non-musical application for this same setup. Instead of playing notes when a piece of fruit is touched, what if the browser showed you a word representing the object? Could you translate that word into multiple languages and turn this interface into a sort of "tactile flashcard" for language learning?

More Ideas

For most of these projects you can start by looking at this starter code on CodePen: https://codepen.io/georgemandis/pen/erKKNN

Or alternately on Glitch:

You can also look at lots of examples via links in the resources & documentation section.