Rendering exported musical scores in the browser

February 21, 2015 | |Source Code

The transcriptions I've posted on Mechanical Scribe were generated by a Windows-only program called Mozart. I can't stand the way the embedded PDFs look on the page, and would much prefer to render the scores directly. Fortunately, there is a fantastic, actively developing project called VexFlow that is capable of doing just this.

The only trouble is that entering notes in VexFlow is extremely laborious. Using the API to enter the notes with Javascript would take ages. The library's author has created an impressive syntax for scores called VexTab to make this process easier--think of it like a Markdown for music--but it does not have all of the features of the API and is still quite difficult to write from scratch.

Here a guy named Dan Ringwalt comes to the rescure with a fork of VexFlow that is capable of importing a format called MusicXML, which several major notation programs are capable of outputting. It works great, but the fork is not actively maintained, and VexFlow has evolved considerably since it was last synced.

Given that forks like this are impractical for active projects, I took the liberty of transforming the fork into a plugin that works with the current release of VexFlow.

Here's an example of that plugin rendering the first eight bars of my arrangement of the Andante from Dmitri Shostakovich's Piano Concerto, which I reentered into a fantastic open-source notation program called MuseScore:

And here's a screenshot of what I entered in MuseScore:

As you can see, there's still some work to be done. The enjambment on mobile isn't working correctly and the importer misses the change of clef in the right hand in the seventh bar, and there is no explicit time signature. The slurs also disappear, although the ties in the four bar survive. These are all omissions that should be easy to remedy, and there's already a lot of impressive work going on here. Note how VexFlow is able to handle the multiple voices in the sixth bar of the right hand.

The reason I'm particularly excited about this plugin is that it will still allow us to use any music notation software that can export to MusicXML (which Mozart cannot, apparently, meaning I have some tedious reentry to do.) Notation entry is an extremely finicky and aggravating process, and it's far better to rely on existing software than to recreate and entire new entry system online. At least for now.