Create Your Own Music Visualizer on CodeHS

I went to a concert recently. The music was great. The people were friendly. The dancing was funky fresh. But what really struck me were the visualizations dancing on the screen behind the band.

Music visualization has become an essential component of live music performances.

I was very impressed with the visualizations. I kept thinking about what an incredible application of computer science this was! I loved how programming and art were combined to add a mesmerizing visual component to the music, and enhance the experience for both the band and the audience.

Today we see music and computer science being fused together in many different ways. From creating and performing electronic music, to editing and remastering music made with traditional instruments, to collaborating and sharing music over the internet, computer science has made several important contributions to the field of music. One of the most impressive contributions has been the ability to visualize music in real time. Just take a look at these examples:

Visualizing Music on CodeHS

All of this got me thinking about what a valuable skill creating music visualizations is. With a little bit of programming knowledge and a little bit of creativity, the possibilities are endless! Visualizing music is the perfect type of project to show students the powerful applications of computing.

Students can now learn how to create their own music visualizations on CodeHS!

The Visualizing Music module is available as a supplemental learning module in the Introduction to Computer Science course. You can check out the module here: https://codehs.com/library/module/1269

Using JavaScript in the browser, students will learn how to access the audio data in a song and create animated visualizations that react to the changing data. These are just a few of the visualizations students will be able to create:

Run this visualization for yourself here: https://codehs.com/share/q3LWHKB2v08g7xk4C1Xs
Run this visualization for yourself here: https://codehs.com/share/UKH8YJeZoBDGedFVTWTc

Students will analyze example visualizations, practice creating several suggested visualizations, and finish with an open ended project creating their own visualization from scratch. We’re excited to see the all of the different music visualizations students will create! Tweet your music creations @CodeHS with the hashtag #MusicalCode

I’m Interested!

If you are interested in incorporating this learning module in your classroom you can get in touch here: https://codehs.com/learnmore

If you have any other questions, please shoot us an email at hello@codehs.com to let us know!