Music, Encoded: How a Bit of Programming Can Become a Teacher’s Secret Superpower

Music, Encoded

How a Bit of Programming Can Become a Teacher’s Secret Superpower

By NAfME Member Krisztina Mathe

Over the course of a few months, education as we know it has entirely transformed. The COVID-19 pandemic has wreaked havoc on traditional classroom learning, and even more severely impacted ensemble rehearsal and performance experiences. This situation and its setbacks, however, are not without a bright side for those teachers who can demonstrate flexibility in times of major change. We can continue to foster valuable educational opportunities for our students, especially if we take the time to understand the advantages offered by developing technology-based skills. While this article will present a personal application of technology in an elementary general music classroom, the implications of computer science extend well beyond grade level, music area, and subject.


Teachers Who Code: Finding a Silver Lining during Remote Instruction

About halfway through my degree in music education, I embarked on a minor in computer science to supplement a music-heavy curriculum. Eventually, I found myself in the throes of calculus, discrete mathematics, and courses that applied various advanced algorithms. While I had been challenged by some of my music requirements, I struggled in these technical courses like a fish out of water. While I had always been mathematically inclined to some degree, I was unaccustomed to the style of problem-solving often demanded by the design of computer programs. Ironically, I also struggled to draw connections between these newly developing skills and real-world applications until I had completed my minor altogether.

Computer programming blue binary code background | Igor Kutyaev


I was midway through my final semester of student teaching in general music when the transition to remote instruction began in my state as a response to COVID. My cooperating teacher (names omitted for privacy) had been aware of my programming skills by that point, but she wisely drew them out as we were building online learning materials together for our fourth and fifth graders. Over the next several weeks, I had built a sizable portfolio of interactive materials, which were deployed as individual webpages and spanned across diverse topics in the curriculum relating to both rhythm and pitch. One of my primary objectives had been to code out activities that were currently unavailable as internet resources, in order to generate countless examples for students to sharpen their skills. To my tremendous gratification, this was met with great enthusiasm by my colleagues, and ultimately many of the students.

Especially as this period of remote learning continues, technology will influence education in an even greater capacity, and it is critical that modern educators show some willingness to understand this impact. Educational technology companies, such as Khan Academy and Coursera, have emerged in the last ten to fifteen years and completely redefined the way students can learn. I used the QuaverMusic site during my student teaching to build units across multiple eras of music history. Quaver is a fantastic example of an online platform built exclusively to support music teachers, and many smaller resources exist across the internet to provide students with opportunities to fine-tune their aural skills and music theory knowledge.

While these websites are valuable tools, they may not necessarily be effective for every student. Thorough differentiation of learning materials is a constant and critical issue in the design of lessons, and is a question I considered as I built my own computer programs. Teaching is a highly collaborative profession, and lesson activities are often an amalgamation of external sources and individual creativity. Teachers must certainly be able to modify borrowed resources or even generate lesson components from scratch in order to address the needs of each individual in the classroom. Computer science is particularly well suited towards the latter issue and will be explored at length in the following analysis.


Rhythm Grids: A Case Study and Analysis

The currently existing tools for web development are vast, and the associated online communities provide a wealth of supplementary resources for one to explore his or her interests deeply. Prior to my student teaching experience, I had spent some time researching available libraries that could be adapted for a music-based website, and created a simple (albeit still buggy) pitch dictation generator for a computer science independent study. Its corresponding codebase was the foundation for the projects I made for my elementary general music students. Those activities were split into a few straightforward components: a front-end of basic HTML and CSS with backend logic in vanilla Javascript. The back-end was substantially supported by two external codebases, the Vexflow notation library (Mohit Muthanna Cheppudira, 2010) and Tone.js audio library (Yotam Mann, 2014). Both of these programming interfaces are widely used in exciting music projects that are freely available online.

In order to better demonstrate the overall impact achieved by the tools I created, I will refer to a single example from my activity portfolio. One of the targeted skills for our fifth graders was to be able to map out a rhythm based on a particular subdivision. My cooperating teacher initially had our students complete handwritten worksheets, on which students decoded a rhythm into a grid along a subdivided timeline. While we continued to reinforce these skills throughout the remote learning period, the physical worksheet format was cumbersome both from an accessibility and grading standpoint. We needed to generate a steady stream of practice problems, which students would then have to print out, complete, and upload for evaluation. Additionally, there were certain individuals in each class who required remediation. With these details in mind, I sought to create a comprehensive online interface for students to be able to complete these same exercises, in varying degrees of complexity. Each exercise would also be evaluated for total correctness, and work samples, if needed, could be submitted via a screen capture. The first version published for students appears in Figure 2. I used this activity as the basis for a week-long fifth grade lesson plan, and eagerly monitored student input.

Rhythm Grid
Figure 1: Handwritten Sample of “Rhythm Grid” exercise. Arrows are used to denote rhythm duration.

computerized Rhythm Grids

Figure 2: First Version of computerized “Rhythm Grids.” (See Appendix)

An optional, anonymous survey was provided for students to submit feedback based on their experiences using this webpage. Some questions asked for a numeric evaluation from one to five, while a few others requested short written responses. Of the 43 respondents, more than seventy percent indicated a score of 4 or above for categories which pertained to the overall helpfulness of the site, as well as ease of use (see Figures 3.1 and 3.2). While it is necessary to note that this is a very small sample size in relation to the entire student body, these results are encouraging. More importantly, I found the extended responses to be particularly useful for mapping out revisions to the site. Many students criticized the layout of the webpage with respect to color as well as spacing of instructional text and interactive elements. Figures 4.1 and 4.2 reflect the latest revisions to the activity. While this second version was not formally reviewed by the students, my cooperating teacher was markedly pleased by the newly simplified interface and incorporation of color-coding for added clarity. These features were implemented specifically with struggling students in mind.

Student response helpfulness
Figure 3.1 Student response sample on Helpfulness, courtesy of Google Forms (See Appendix)

Student response Ease of Use
Figure 3.2 Student response sample on Ease of Use, courtesy of Google Forms (See Appendix)

computerized Rhythm Grids with color
Figure 4: Second version of computerized “Rhythm Grids” (See Appendix)

This particular activity and the other pages included in the portfolio are by no means finished products. There are still many ways the code can be expanded upon to create a more colorful user experience. One of the most beneficial aspects of creating one’s own software is that improvement is continuous. Every year, teachers meet a fresh group of students with unique needs and expectations, and the software used in the classroom should adapt as necessary. Learning a programming language is not without its challenges, but such a skill unlocks possibilities for problem-solving and creating vivid, engaging resources for students. It is uncertain how long the era of remote learning will endure, but education will always thrive as long as teachers continue to exercise persistence and creativity and even dare to endeavor into new territories.



Student Teaching Website Portfolio and Research Components

All online resources designed by the author are collectively stored here.

Please visit this page in order to view the Rhythm Grids pages exclusively.

Images included in the body of this article are samples from the author’s portfolio and from a survey created through Google Forms. Student feedback was submitted anonymously. The complete set of survey questions can be accessed here.



Cheppudira, M. M. (2010). VexFlow. Retrieved from

Mann, Y. (2014). Tone.js. Retrieved from


About the author:

Krisztina Mathe with clarinetNAfME member Krisztina Mathe is a recent graduate of Mason Gross School of the Arts at Rutgers University. Over the course of her undergraduate degree in music education, she studied clarinet under MET Opera musician Jessica Phillips, completed extensive fieldwork across elementary and middle school levels, and achieved a minor in computer science. While she is currently working in technology, her interdisciplinary academic experiences have inspired her to return to graduate school to investigate intersections between music and neuroscience, in hopes of further impacting fields of music education and therapy.

Did this blog spur new ideas for your music program? Share them on Amplify! Interested in reprinting this article? Please review the reprint guidelines.

The National Association for Music Education (NAfME) provides a number of forums for the sharing of information and opinion, including blogs and postings on our website, articles and columns in our magazines and journals, and postings to our Amplify member portal. Unless specifically noted, the views expressed in these media do not necessarily represent the policy or views of the Association, its officers, or its employees.

November 20, 2020. © National Association for Music Education (