Skip to main content
note

The 2019 workshop site, kept as it was. Links and images point here now. The entry has the context.

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:
https://codepen.io/georgemandis/pen/erKKNN

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:
https://codepen.io/georgemandis/pen/xjzXgd

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:
gist.github.com/lauri-kaariainen/8089926

Fruit Piano​

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

Thermometer​

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:
http://glitch.com/~webmidi-starter

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