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.
Fun 2 think about diversity of musical life experiences & trajectories Decades ago this time of year I enjoyed playing holiday music in school & community on trumpet Now I’m programming a #CircuitPlayGroundExpress 2 play holiday music 4 a digital ornament #musiced #possibilities
— Evan Tobias (@etobias_musiced) December 23, 2018
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:
- Learn more about programming and physical computing
- Identify possible connections between programming, physical computing, and music learning and teaching
- 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
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.
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,
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.
Anyone using #circuitplaygroundexpress & #MicroBlocks How do we access the playgroundexpress capacitive sensors to start something via MicroBlocks ie playnote – I can use buttons AB but can’t figure out how 2 set up if touching capacitive A3 play this set of tones etc. @adafruit
— Evan Tobias (@etobias_musiced) December 22, 2018
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
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
- The MakeCode programming environment
- The MakeCode platform is free and open source
- MakeCode is browser-based so you can access it from any computer with internet access
- MakeCode simulates what your programming would do on the Circuit Playground Express in realtime, which is helpful for immediate feedback
- You can toggle easily between block-based programming and javascript – this is helpful for both adjusting aspects of the programming and for learning/teaching.
- It is easy to load the program into your Circuit Playground Express to check how it works on the physical device. You simply plug in a USB cable, hit the reset button on the device (if needed), and drag the file onto the mounted drive.
- Music-Related Affordances
- MakeCode includes some music-related code blocks to control components such as pitch, duration (to some extent – I’ll address further down), pre-existing sound effects, tempo and volume
- When programming music, the tone blocks include a popup keyboard, which is helpful
- Community and Resources
- People share their code and it is easy to open an existing project and tinker. This is similar to the Scratch platform, where you can open and edit projects, which is helpful for both creating your own projects and for learning.
- Examples and free tutorials for programming the Circuit Playground Express with MakeCode
A free project-based course that takes people through basic aspects of programming the Circuit Playground Express with MakeCode created by Rob Morrill
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
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:
- Create a “Function” using the blue function blocks
- Title the function in relation to the music and phrase – i.e. “JingleBellsPhrase1.”
- 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.
- Use the drop-down menu and keyboard to select a pitch
- Use the drop-down menu to select a duration
- 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).
- 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.”
- 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:
- 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.
- 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
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).
I programmed the songs to play when the capacitive pads were triggered. with a fairly simple block:
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.
I like the convenience of @MSMakeCode being browser-based but warning Just experienced 5th or 6th time of #MakeCode reloading in my browser & lost last 10 min or so of work! Yes should be saving more often but warning nonetheless OK back 2 programming #FrostyTheSnowman #musiced
— Evan Tobias (@etobias_musiced) December 26, 2018
- 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:
- Adafruit Forum for Circuit Playground & Circuit Playground Express
- Adafruit Circuit Playground Express page
- Additional info on Microsoft MakeCode and the varied development environments it works with
- Maker Course for the Circuit Playground Express
- Music Projects for MakeCode and Circuit Playground Express
Materials I used
Some of these links are affiliate links:
- Circuit Playground Express
- Adafruit Circuit Playground Express Enclosure
- AAA Battery pack with on/off switch
- Alligator Clips
- Conductive thread
- Heavy-duty aluminum foil
- Cardboard
- Laptop with internet access for using MakeCode
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.