Skip to content

Maker culture and music education: Programming a digital ornament with music and lights with MakeCode

How diverse are the forms of musical engagement that we support in music programs?

I think music education, particularly in K-12 contexts could be much more expansive in terms of the types of musical engagement we include or address in music programs. Combining music education and maker culture as STEAM education has great potential. Here’s a post on combining music, computational thinking, and physical computing as a form of arts-driven STEAM education.

TL;DR

Last year (2018), I created a digital ornament that played music and flashed lights as a context to explore programming music, wrote this post about the experience, and never got around to posting it. Now, a year later I’m finally hitting submit!

Background

For the past few years, we’ve been exploring aspects of Science, Technology, Engineering, Arts, and Math (STEAM), Maker Culture, music engagement, and music learning and teaching as part of the Consortium for Innovation in Music Education’s Music, Science, and Society initiative. We’re finding a lot of potential at the intersection of music and maker culture for expanding music programs. While I haven’t published much about STEAM and maker culture explicitly, I embed related projects in many of my courses at ASU, work on related research and projects, and, when I have the time, play around and explore myself.

So, this last winter break I decided to create a digital ornament to practice programming music and media and to make what I figured was a unique gift to my family. Of course, even when I’m not thinking explicitly about music education and research, it’s easy to make connections between maker culture, STEAM, and music learning and teaching. So, here are some reflections on the process of making a digital ornament, the learning and making process, and possibilities for music learning and teaching.

This post contains some affiliate links to books and resources.

Learning, Teaching, and Making

Since it was winter break and Christmas was arriving, I decided to make an ornament that could light up and play music. I had three goals for my endeavor:

  1. Learn more about programming and physical computing
  2. Identify possible connections between programming, physical computing, and music learning and teaching
  3. Make an interesting ornament that could light up, play music, and allow for interactivity such as being able to touch something to make the music play.

To “practice what I preach” in relation to music education, it was important to learn (goals 1 & 2) through a context (in this case a project of creating a digital ornament). Having a project to work on made learning more enjoyable and avoided trying to learn decontextualized bits of information on programming or physical computing.

Criteria I Had In Mind

  • Embracing and learning from failure
  • Creating in an iterative manner
  • Thinking about whatever I finished by Christmas day as a work in progress
  • Searching for and curating information to help with the project
  • Reaching out to more knowledgeable others (including but not limited to my PLN)

I also approached the project with the following ethic and processes:

  • Have a functional ornament that could at least light up to hang on a tree by Christmas day
  • Avoid spending too much time on the computer

Choosing A MicroController

I knew that I wanted to use a development board and also desired to learn more about the Circuit Playground Express (sometimes also written as the CPX). This was partly because a) we have several Circuit Playground Expresses available in the ASU music education program for our informal Maker Group and Sound and Music Innovation Lab (SMIL) that we will be introducing into some of our courses and b) I wanted to work with a device that would allow for a lot of flexibility in terms of what I could do with it but be fairly easy in terms of having immediate results and not having to troubleshoot the entire time.

A Brief Introduction to the Circuit Playground

When it comes to working on music-related projects that use microcontrollers, I really like the ease of use and low barriers of the Makey Makey. However, I wanted some more advanced features for this project and did not want to be tethered to a laptop. I knew I wanted to work with a microcontroller that I could program but wanted to focus more on aspects of music and media than on details of coding and programming. In other words, I didn’t want to get bogged down troubleshooting details of code such as putting a semicolon in the wrong place. So, I wanted something a bit easier to work with than an Arduino.

I thought about using a Bare Conductive Touchboard, which I’ve worked with before, but decided to save that for a different project. I knew that people can program for the Circuit Playground Express by using block-based programming, which was attractive to me. The Circuit Playground Express comes assembled with a tiny speaker, a microphone, multiple sensors, and neo-pixels (tiny lights), so I could jump right in and make it do things like light up, blink, play music, or respond to light or sound among other aspects of music and media. For additional perspectives, check out Adafruit’s guide to choosing a microcontroller for a project.

Getting Started

Lucky for me, I immediately found a tutorial on how to create an ornament with a Circuit Playground Express.

The tutorial focused on using the block-based programming platform, Microblocks. Microblocks is free but is not browser-based. So, you need to download and install Microblocks onto your computer. The tutorial was helpful since it was easy to start with some existing code to tinker with. But, I wanted to add sound. I played around with Microblocks for a while, found blocks for creating music, and started programming jingle bells pitch by pitch. 12/21/19 – At the time I originally wrote this post and programmed the ornament, I was unaware of the problematic past of Jingle Bells.

While it was fairly easy to start programming lights and music with Microblocks, I had an issue trying to figure out how to access the capacitive sensors of the Circuit Playground Express in order to control when the music would play.

You can also see from the image above of the code, that I was estimating the duration of each pitch by programming the number of miliseconds for which the pitch would play. I added short rests “Wait X milisecs” to give some space between each pitch since it sounded like the notes blended into one another. Aside from the few short videos on the Microblock website I could not find much information, tutorials, or resources to support what I wanted to do so, given the timeframe, I decided to switch over to use a different programming platform.

Creating Music and Media with MakeCode

I was aware that Microsoft MakeCode was a platform available for programming the Circuit Playground Express but had not yet explored it. It was easy to get started using MakeCode for this project. I was immediately able to start programming light and sound on the Circuit Playground Express and found the MakeCode programming environment more intuitive than Microblocks. Here are some aspects of MakeCode that I found positive (and why I would recommend exploring its potential for arts education).

A Process for Creating Music and Media with MakeCode

Once I made the switch to MakeCode, I started playing around with the environment by dragging blocks and tinkering. I first used the “Show Ring”
block and played around with the different options for colors to control the neo-pixels. I put several “Show Ring” blocks in different sequences to see what would happen. Eventually, I took a look at some of the tutorials included in the MakeCode platform for the CPX – I would sometimes toggle back and forth between my own project and the tutorials. For instance, the “Siren” tutorial was helpful for knowing something as basic as putting light or sound blocks in an overarching “Forever” or “Start” block. Later on, I toggled back and forth between the block and javascript views. I did this at first because I was curious about the underlying code of the blocks but found some of this a bit opaque.

For instance, once I started using the sound blocks, I wanted to know the exact durations in milliseconds of the pre-existing durations included in the block code.

Programming Music in MakeCode

After playing around with some light blocks and making the CPX blink in different ways, I delved into programming music. My goal was to have at least two different songs programmed into the CPX so that I could create tangible objects to hang from the CPX that someone could touch to trigger each song or blinking lights.

I wanted to program the music for the ornament by ear. I started off with Jingle Bells (again, at the time I originally wrote this post and programmed the ornament, I was unaware of the problematic past of Jingle Bells.) Soon into programming Jingle Bells, I experienced the frustration and difficulty of creating dotted rhythms to allow for syncopation in the music. I’ll explain this in more detail in the challenges and constraints section of this post.

Phrases or Sections (music) as Functions (code)

I knew from prior experience of working with music, computational thinking, and programming/coding that while I could program each song pitch by pitch for the entire song, it made more sense to program the music in terms of phrases or sections. Here’s a process for creating music by programming functions as phrases or sections:

  1. Create a “Function” using the blue function blocks
  2. Title the function in relation to the music and phrase – i.e. “JingleBellsPhrase1.”
  3. Sequence a set of  Music (orange) “Play tone. . .” blocks into phrases or sections within the function block by dragging and dropping them into place within the function block.
    1. Use the drop-down menu and keyboard to select a pitch
    2. Use the drop-down menu to select a duration
      1. The pre-set durations are helpful but limited in terms of durational values you may need (I’ll address this in the challenges and constraints section).
  4. Once you have all of the phrases or sections you want/need as separate functions, create a function for the entire song and title it something like “JingleBellsFull.”
  5. Now, sequence the functions (phrases or sections) you created that make up the music.

Here’s a pic of the structure or sequence of functions (phrases or sections) and code for each song I programmed.

Programming in terms of phrases or sections was helpful for a couple of reasons:

  1. By having the phrases or sections organized as such, I could program the music by recalling the phrase or section instead of continuing to program each individual pitch.
  2. Having the phrases available as functions allows you to call the functions (phrases) to hear how they sound pretty easily. To do this I assigned whatever phrase (function) I wanted to hear to a pin (one of the capacitive parts of the CPX).

So, from a music learning and teaching perspective, this is an interesting opportunity for students to think about structure and to make decisions about what phrases they might program as functions and how they might call those functions to create the song. I think it’s an interesting way to understand the relationships between different parts of a song while also developing an understanding of programming. This could be an example of STEAM where computational thinking meets musical thinking and engagement.

Note that creating the music by programming functions is just one approach. For instance, you can program a set of pitches and durations as a “string” and “variable.” In the Adafruit MakeCode forum Kathy Ceceri mentions having students create music using strings

Challenges and Constraints (and some solutions)

I began to experience some challenges soon into programming my ornament, but I like to think about the challenges and problems that arise as learning opportunities (see [affiliate link] Jackie Wiggins’s Teaching For Musical Understanding for some writing on musical problems to solve for a related perspective). If working on this type of project in a (secondary) music education setting, I would likely avoid a step by step sequenced approach, and instead scaffold students engaging in problem finding and solving, just as I did at home. Each challenge they might experience would be an opportunity for learning.

Coding the Music Vs Playing Recorded Clips

The Circuit Playground Express is capable of playing audio clips, however, since MakeCode does not play audio files (as far as I understand), you need an alternative programming environment to use audio files. This was not a challenge or constraint for me since I was interested in programming the Circuit Playground Express to play music for the ornament. If you are looking to have the CPX play audio files, Adafruit suggests using Circuit Python and the Mu Editor. If you are interested in something a bit easier to have a development platform play audio files that can be triggered without needing to code or being tethered to a computer, I suggest the [affiliate link] Bare Conductive Touch Board. The touchboard is much more expensive than the CPX but has a pretty low barrier to interactive projects with sound. You can find out more about Bare Conductive here. It is fabulous for all kinds of interactive projects.

Rhythm and Duration of Sound with MakeCode

One of the most frustrating aspects of programming music in MakeCode, was specifying durational values for pitches that were not already built into the code blocks. I started my project programming Jingle Bells. I wanted to be able to program syncopation but could not figure out how to program the exact durations. At one point I toggled between the blocks view and the javascript view to try programming exact durations but it never quite worked exactly as I liked so I got as close as I could. I did find it valuable to toggle between the two views because it helped me understand how different values of the block code were programmed in javascript. I experienced the same issue when programming Frosty the Snowman. For example, I had to use the drop-down pre-set durations of “beats” but attempted to be specific with miliseconds with the Middle E at 700. Here’s a pic of some code for Frosty the Snowman in blocks view:

Here’s the same phrase in javascript view. Notice how on line 78 I manually typed in 700. It’s also neat to see the numerical values for the pitches that appear in the block code. This was one of the nice things about being able to easily toggle between the block view and javascript view. I was learning more about programming as I was programming by seeing what was “under the hood” of the blocks that I used:

By the time I finished programming the ornament, I had a version of Jingle Bells, a version of Rudolph the Red Nose Reindeer, a version of Frosty the Snowman, and some different patterns of lights changing colors. Since I was running out of time, I rushed through programming the phrases of Rudolph and ended up with some off-kilter parts, which ended up giving it a bit more character. Variations on Rudolph, I guess.

Physical Computing: How I triggered the Ornament to Play the Music

I wanted to make it easy for my child to trigger the music and lights on the digital ornament. So, I cut out different sized circles out of cardboard, covered them in heavy aluminum foil, and attached conductive thread to the aluminum circle by placing a strip of copper tape over the thread (and in one case just clipped on an alligator clip to the aluminum covered cardboard.

I powered the CPX with a battery pack with an on/off switch, which was important so that the batteries wouldn’t drain. To protect the CPX, I covered it with a plastic enclosure that allowed access to the pads with the cardboard & aluminum foil ornaments dangling down so that anyone could grab hold of a silver (aluminum covered cardboard) ornament to trigger a light show or music. I then tied each piece of thread to a separate capacitive alligator clip pad (the holes around the perimeter of the CPX).

The digital ornament with programmed music.

I programmed the songs to play when the capacitive pads were triggered. with a fairly simple block:

Code to trigger the CPX to play Frosty the Snowman when someone touches the associated ornament.

We realized very soon that holding onto the ornaments didn’t always make the connection to trigger the music or lights, and the neopixels emitted a very loud sound that increased as they became brighter. But in general, it worked.

Wonky Aspects of MakeCode

There were some other aspects of MakeCode that sometimes made it difficult or frustrating to use. These are glitches that could be user error for all that I know but I can’t explain why they occurred.

  • The most frustrating aspect of working with MakeCode was that I would sometimes lose work if the browser re-loaded. This was partly my fault since I should have been saving more regularly. But, I found the autosave function to be inconsistent.
  • Occasionally MakeCode would retitle names of functions. This would often happen when I left the browser open and came back to it after a while and the page would reload. For instance, Jingle Bells Phrase 1 would be renamed as Jingle Bells Phrase122. This wasn’t a big deal but did get a bit annoying.
  • I placed blocks in specific areas of the programming environment to keep things organized in a way that made sense to me. Often, when a page reloaded after a while, the blocks would be in different places that were no longer organized in a way that was meaningful to me. When this occurred I would have to zoom out a lot to find blocks of code scattered around the programming environment. This was a time-waster and frustrating. I wish there was a way to pin the blocks to certain locations. Maybe there is and I’m just unaware?

Helpful Resources for MakeCode and Playground Express

Here are the resources on MakeCode and the Circuit Playground Express I mentioned throughout the post and more in one convenient place:

Materials I used

Some of these links are affiliate links:

Was it worth it?

Yes! I learned a lot, enjoyed the process, and ended up with a functional albeit basic musical ornament. Now, a year later, I can go back to the code and circuit playground express and modify the code, program additional music, and play around with the next iteration of the ornament. Pretty cool.

Is this music education?

I think this is a great example of an organic intersection of music, computational thinking, and physical computing. In other words, engaging in a project to create a musical ornament with a light show involves multiple disciplines. In this case, the arts (my desire to make the ornament play music in a particular way and to change light patterns) led to the “need to know” how to program the circuit playground express and led to me learning aspects of STEM disciplines through the problem finding and solving. With a generative question such as: “How might music and computer programming help us make interactive objects or media?” this could be a great example of project-based learning in music education.

From a curricular standpoint, the music and STEM (STEAM) disciplines informed one another and needed one another to make a satisfying project, one was not subservient to the other. See ASU Music Ed doctoral alumn Jared O’Leary’s dissertation “A Corpus-assisted Discourse Analysis of Music-related Practices Discussed within Chipmusic.org,” for another example of blurred and porous borders and boundaries between STEM and music disciplines.

Just as some students might want to play the violin, or make beats, some students might want to create interactive projects that involve music and programming. So consider how music programs might include similar projects that include aspects of music and STEM disciplines in organic ways that support students’ music engagement and learning. For folks in STEM disciplines, consider including arts-driven projects that require the development and application of STEM engagement and learning.

Tags:

Share Your Perspective

This site uses Akismet to reduce spam. Learn how your comment data is processed.