[p-com] Project 1: music box

In collaboration with: Youming

For this 2-week project, Youming and I, after jamming out many ideas, decided to make a “music instrument” that responds to pressing different buttons. We imagine the interactions to be kind of like playing with a toy or a simple midi device, for which each button triggers a different loop of tones.

During the first week, we sketched out a four-button, one-speaker schematic, and tested with a simple code.

first schematic

We need to make sure our program does the following:

when press 1st button, an array of notes plays in loop

when release 1st button, the loop continues

when press 2nd button, the loop stops

Button change in a for loop wouldn’t do it, Youming suggested that we try a while a loop with a boolean triggered by button click. Tom also introduced me to a loop break command during office hour earlier that day, which, then I realized, could be easily applied to the while loop.

We were relieved that it worked, as this snippet of program paves the foundation for our next tasks. Loop gets triggered by button press, and is only interrupted when the other button gets clicked on.

#include "pitches.h"
const int speakerPin = 8;
const int noteDuration = 20;

int buttonState = 0;
bool playing = false;

int notes1[] = {
}; // A minor

void setup() {
  pinMode(2, INPUT);
  pinMode(3, INPUT);

void loop() {
  buttonState = digitalRead(2);
  if (buttonState == HIGH){
      playing = true;
    buttonState = digitalRead(2);
    for (int note = 0; note < 4; note++) {             
        tone(speakerPin, notes1[note],100);
      if (digitalRead(3) == HIGH){
        playing = false;

We then went on giving sound two more buttons. We weren’t quite sure what to do with the 4th button. One of the idea would be that it speeds up the current loop. I wrote the 3rd button to be 8 8th notes instead of a 4 quarter-note loop like the previous 2 buttons, in order to test out what “speeding up” could sound like.

Another challenge we face was that after giving each button a melody / function, there’s no way to stop it from playing once started. A pleasant interaction shouldn’t involve unplugging to stop an annoying speaker. We altered our if statements by finding a change of state first, before judging the state being HIGH or LOW. This required us to:

  1. Call new integer variables of buttonState and previouButtonState before setup
  2. In the if statement, find out that buttonState != lastButtonState , and embed the second if statement button3State == HIGH within
  3. Outside the if statements, return lastButtonState to buttonState for next round of calculation

The result was a little wonky. The buttons sometimes don’t respond well to constant button pushes. Youming thinks that they require some debounce time, and was determined to find a solution. We didn’t like that we have three separate while loops for three buttons either, and Youming aimed to simplify the code as well, all while he tried to figure out the 4th button. A lot of work he took on.

Meanwhile, I started thinking about housing and fabrication. I was introduced to buttons that are in 2×2 (and 4×4) matrix systems, which many people hook up RGB LEDs within and use as MIDI keys. I kind of understood its schematic, but found it confusing to use it as both output (LEDs) and input (buttons). Guides, examples and Arduino forum didn’t help much, I needed some guidance on this. Mysteries be solved in the future.

However, I couldn’t let go the excitement of colored lights responding to button presses, so I added three LEDs that would respond to each button.

final schematic

While adding the LEDs into the code, I tried deleting the if statement for state change detection to see if the button would respond better this way. Surprisingly it solved all our problems. Every press now just initiates the loop to start from the top, and conveniently the 4th button — function for which we still haven’t settled on — can just act as a stop button.

Time is pressed, so Youming agreed to use this as our final code, even though the while loops still look a little silly. Youming later on did figure out how to combine the while loops into one for loop! Check out his solution in Github.

Here’s a video of our final prototype:


Since I get access to the floor (and considering Youming did a lot more for coding), I took on the challenge of giving our little music machine a proper home. But truth to be told, I was completely clueless

I found a cardboard box on the streets in my neighborhood on my way to school one day, not an unusual sighting. This specific box, however, is exactly the size of my breadboard. Convenient, I thought.

an arduino board with four buttons inside a cardboard box

I started off by mapping out where I wanted the buttons to be. The box had a bottom that was in four pieces, and a lid (with some stickers that were… very sticky) at the top. I’d like to use one of its cleaner side planes for my buttons, and the whole box would be put sideways: lid as front for speaker, side as top for buttons, bottom as back for… wires and stuffs?

The box is a little bit thicker than the buttons’ actuators, and in order to enable a solid press, I cutout a square on one layer of the cardboard at the back of that plane to house the button base, left a small hole for the actuator to pass through, and connect to the hat (? I have 0 knowledge of button terminology) on the outside.

I soldered wires on the buttons. In fact I soldered a lot of things: resistors onto negative legs of speaker and LEDs, and later wire onto the resistor that was soldered onto the wire that was soldered on to the speaker. At one point I regretted all the soldering, and felt like I should’ve soldered either EVERYTHING or NOTHING.

Since most things were soldered, I figured I didn’t need such a big breadboard. The space saved from using a smaller breadboard made it possible to replace the Nano iot board with Uno, so that I could plug it into wall. I have also found that the speaker performs better when plugged into Uno, probably because it allows for larger current flow.

I wish I remembered to document more, but I was quite stressed out throughout. I hot glued a lot of things and it was very messy. The box was hard to manipulate and it took me a lot of time and patience to sort through all my wires in such a small space.

messy hot glue

After gluing in the lights to secure them through the holes, I freaked out again cause it was six more wires I need to pug into the breadboard. My 11:30 pm solution for this issue was to solder even more and merged all the legs that would connect to ground. Three positive legs, and the negative leg with an alligator clip were all directly plugged into Uno, thanks to its genius design that includes 3 ground pins.

When I eventually tear it apart I will remember to take a photo of what the inside of it actually looks like. For the time being here’s the finished box that I feel very proud of:

two image of a box with four buttons and a speaker, one shot from the front and one from behind

Reflection / Critique

In terms of interface, I did consider: either putting LEDs next to their corresponding buttons, or use the same colored button and lights to indicate their relationships — both would be better options actually. Some other helpful feedback from class include:

  • Having 4 buttons and 3 lights is a bit confusing
  • The red button and red light are easily associated together (and they aren’t)
  • The users might not know where to start with all the buttons

Valuable lessons were also learned about documentation and presentation. I should consider focusing more on showcasing its function, instead of playing “music”. If I were to redo the final demo video I would:

  • Stop a couple more times to demonstrate the stop button
  • Push one button multiple times at different position of the loop to show how the looping works
  • Give a couple more seconds in between each action
  • Maybe…maybe, add texts

Overall it’s been a satisfying experience connecting what we’ve learned so far, and I appreciate Youming for being a responsive, skillful, easy-going, and overall amazing project partner. Seeing what everyone else in the class did also motivated me to push myself harder — I was slightly sad that our project is not conceptually as strong as our peers’, but still proud of all the technical details we worked through.

Till next time!

Leave a Reply

Your email address will not be published. Required fields are marked *