Webscore Player

While I was finishing up my arrangement of Make 'Em Laugh, it occured to me that the pages on this website where I show my music were, for a lack of a better word, bad. The score was shoved off to one side, the button to download the .mscz file was enormous, and the pdf was displayed using an iframe to a google docs viewer. Looks aside, it also wasn't very functional. The point of this website is to show off share projects that I've put time into and think are kinda cool, and unless you're really good at sight reading and aurilization, the old music pages weren't effectively showing what it is that I'd done. There was a YouTube player that showed a recording of the song, but the whole point of arranging is that I took that recording and turned it into something else. I wanted other people to hear and see what I do when I'm working on these arrangements.

Now I can't look at some sheet music and hear it in my head either, so I rely on MuseScore's built-in player. It plays back what you've written as you go, synthesizing the instruments that you're writing for. As it plays, it highlights the current notes across the parts. I thought to myself, could I recreate that functionality within a web browser?

Turns out, you totally can. Apparently, analyzing and creating music with computers is something a lot of people are very interested in. Some people at MIT even made a whole python library for just that. Once I found that, it was relatively simple to get a proof of concept running. I exported my MuseScore project to MP3, SVG, and MusicXML, parsed the MusicXML to extract all the data I needed, wrote that into a JSON file, and then wrote some JavaScript that uses the JSON to manipulate the SVG elements and the audio. What took much, much longer was getting everything to behave. The hardest bit was definitely keeping the highlighting consistently in sync with the audio. There were bugs in the parsing and the playback, and as I learned the hard way, JavaScript's setTimeout() and setInterval() cannot be trusted.

All in all, it was a fun project and I'm very pleased with the result. It was definitely my most extensive dive into JavaScript so far, and I think I learned a lot. And given its success, I'll be keeping an eye out for more ways to soup up this site.