Sheets

Introduction

If you know me, you know that I study Computer Science. Most people who know me don’t know that I love music. I learned to play piano when I was a kid, but stopped playing as I grew older. I recently started transcribing sheet music for the Piano in my free time, in an effort to slowly ease myself back into playing the piano. I ended up posting what I did on YouTube, Niconico, and my personal site. This hobby of turned into a large personal projects, every step was a learning experience.

This blog post is the story of that journey. Most of this post is based on brief personal notes here and there as I never planned on making a post about this.

OSS Scorewriters

Professional scorewriting software isn’t cheap. Finale costs $99 USD and Sibelius costs $299.00 USD (I’m using education pricing, since I’m still in college). I didn’t want to spend money, so I looked into the OSS software available. The two major projects that I found were Musescore2 and LilyPond.

Musescore2 is a decent cross-platform scorewriter. It uses a custom XML scheme as its file format. It can export to other score file formats, but doesn’t do it that well in my experience. It has a couple of visual bugs when dealing with more complex pieces, but generate decent PDF’s (you may need to do some handholding here) and good MIDI’s.

LilyPond is a GNU project which uses TeX-like format for its source files. LilyPond can either generate great PDF’s or good MIDI’s, you can have it both ways. Since I learned to play piano by ear and never really perfected the art of sight reading music, LilyPond’s text based UI and weird playback made it hard to work with.

In the end, I decided to use Musescore2, since it was the easiest to use despite it’s flaws. I have also looked into some other OSS Scorewriters which I might discuss in a later article. These two gave me first hand experience to technical side of score writing.

Sheet Music (Self-)Hosting

There are a couple of sites where you can host sheet music like sheet.host, Musescore.com, and SheetHub.

Sheet.host is a decent site for hosting sheet music. The site seems to have some software issues, based on it’s frequent downtime (not that mine’s any better). The project is in private beta, meaning that the product could change drastically by the time it’s complete. The last one is that this project is not open source, which means I can’t self-host.

Musescore.com is made by the same people behind Musescore2. It appears to be built solely to commercialize on Musescore2, since a decent chunk of components in Musescore2 link to Musescore.com, but unlike Musescore2, none of Musescore.com is open source.

SheetHub was an open source project at one point, but the main repository is gone along with most contact info. I found the contact info for the original project owner, Yos Riady, and reached out to him. He told me that the project was no longer open source and was acquired by BandLab. I couldn’t find any acquisition announcement, which could be because the product blog was deleted, so I asked for more details. He clarified that since “SheetHub was (and still is) a fairly small product” they didn’t see the need to post an announcement. I also found an archived version of the source code for the site, but after looking at the code I decided to move on, very quickly. By the time I read his response, I had already found the source code and finished the basic implementatio of my solution. Nevertheless, it was insightful to understand what happened to such a promising project.

Since none of the available options would allow me to self-host, I decided to make my own based on the interface of all three of the alternatives.

Criteria for Custom Solution

• Don’t Repeat Yourself

  I was going to try to avoid reinventing the wheel as much as possible by building this on top of existing technology.

• OSS & Self-hostable

  To avoid someone else going through the same process that I have so far, I was going to make all my work on this open source.

• Only my content

  If someone else wants to put their sheet music on the site, they can… if they setup their own site. It’s pretty easy to set this up with AWS free tier. By only hosting my own content, I’m reducing hosting costs and avoiding any extra legal issues.

• Sheet Viewer

  I took a lot of queues from Sheethub and Sheet.host when designing this site. Based on these sites, I decided I wanted to have a Sheet Music viewer in the site, whether it was an embed or a PDF.js wrapper. By directly rendering the PDF in-browser, I am removing the extra work required for setting up a serverless function for translating each page of a PDF to an image.

• Synthesia Metadata Parsing

  One of the only non open source applications that is used in my toolchain is Synthesia, which I use to make videos out of the MIDI files which I can then post to YouTube or Niconico. The one part of Synthesia which is still open source is the metadata editor. To avoid repeating myself, I was going to try and parse the metadata which I specified to obtain information to display about the specific score.

With this in mind, I tried tackling the first two criteria by choosing a CMS.

Choosing a CMS

• Jekyll

  I have used Jekyll before (my main site and this blog use it). And based on that, I decided that it was not the best fit for my task.

• WordPress

  This seemed a bit overkill for what I needed, and I wanted to avoid using database for this since most of the data can be parsed from the Synthesia Metadata.

• Grav

  It hase a nice plugin and theming interface. Also, it’s Flat-file based, so no need for a database. Not as widely used as the others, so less chance of resolving issues by search. The Codebase is simple to read, which has allowed me to fix issues relatively quickly.

There were more that I looked into, but I can’t remember all of them since the initial work of choosing the CMS happened a while ago. In the end, I chose Grav.

Theming Attempt #1 - Bootstrap 4

At the point of the theming attempt and at the point of writing this, Bootstrap 4 is not a suitable replacement for Bootstrap 3. I tried to design my site similar to Sheet.host, which used Bootstrap 3. It became evident that Bootstrap 4 did not have the capability out of the box to match up to the features ready in Bootstrap 3. I reached the point where the site could display things and then proceeded to the parsing stage.

Grav Synthesia Parsing

I couldn’t find any plugins similar to what I wanted to do with Grav. This promted me to make my own plugin which parses the Synthesia XML and adds it to the variables that can be used for theming.

Fixing Grav (Part 1)

I mentioned earlier that the Grav Codebase was simple enough for me to read and resolve my own issues. Well, thats what I ended up doing.

One of my scores had a Japanese file name, since the score had a Japanese name. This broke Grav in multiple places, but due to the structure of Grav, it was recoverable.

The issue was filed on GitHub for the admin portal, but after some digging and trying to do the admin changes manually, I realized that this affected the Grav core, not just the admin portal.

After doing some more digging, I found out that this is because of PHP being PHP. This issue narrows down to the differences in getBasename and getFilename in PHP (see implementation). basename is locale aware, which causes it to break when handling UTF-8 filenames. The quick solution was to reduce the amount of calls to basename so that it would hit the issue less often. There is an open issue (at the time of writing this) to reimplement multibyte versions of the PHP builtins, like what I found in PHPMailer and CakePHP.

• getgrav/grav-plugin-admin#1330
• getgrav/grav#2083
• getgrav/grav#2084
• getgrav/grav#2087
• getgrav/grav-plugin-admin#1480

Custom Sheet Viewer (Part 1)

I realized quickly that my embeded PDF approach didn’t work on all platforms, specifically mobile. So, I ended up making a custom PDF viewer using PDF.js and the Framework UI. I used Carousel when using Bootstrap and used Orbital when changing to Foundation.

I knew that with all the elements flying around with my multi-page PDF.js wrapper, I was going to need to use a JS framework like React, Vue, etc. I ended up chosing Svelte as the framework since it does most of the templating and processing at build time rather than at run time. It’s also easier to make Vanilla.js components this way.

I would like to point out that the Svelte module for Gulp is broken. Since Gulp is the main tool I use when working with Javascript projects which have complicated build processes, I ended up calling the official Svelte module for rollup from Gulp.

Also, the buble module (I like to think of it as knockoff Babel) for Gulp is broken as well. The rollup plugin does work and is used in example projects for Svelte, so I ended up calling it the same way i do for the Svelte module.

Theming Attempt #2 - Foundation 6

I didn’t learn my lesson the first time when I chose a brand new version of a piece of software with a lower adoption and less available support (Bootstrap 4). I chose to work with Foundation 6 because of the amount of customizability I had with it. Unlike Bootstrap 4, Foundation 6 had all the features I needed. I did encounter a lack of documentation with Foundation 6, due to it being relatively new.

In the end things worked out ok, and the appearance of the site was adjusted to look more like SheetHub.

Fixing Grav (Part 2)

For some reason, I decided I wanted to have LDAP authentication on my site. Turns out the Grav plugin for LDAP auth didn’t work with UNIX Sockets, so I forked it and added UNIX Sockets. Due to the way that the plugin was set-up this broke compatibility with the old version. Because of this, It hasn’t been merged and probably won’t be for a while.

Custom Sheet Viewer (Part 2)

I successfully migrated my Sheet Music Viewer to Foudation 6’s Orbital Component. Since things were working too well, I decided to do 2 things. First, I wasgoint to separate the Sheet Viewer from my Grav Theme, making it a general purpose component that people could use. Second, I was going to make it into a Foundation 6 Plugin (there is no clear documentation on how to do this at the time of writing the code). The first part was simple enough, the second part was tricky. The build setup for Svelte was tricky enough, but trying to add a second layer on top of that based on the nonexistant Foundation 6 Plugin Documentation made it even more confusing.

Handling Copyright

One of my videos for my sheet music got taken down because the audio matched up with the original song. Considering that I used the default Windows Soundfont to make the video, I found it somewhat amusing that it matched up to the video. In the begining, the company which was claiming ownership (Sony Music Entertainment (Japan) Inc) had rules set to automaticaly block access to the video from Japan.

I tried to reach out to the company and explain that this was completely synthesized from the MIDI and did not use the original audio in an attempt to have the block cleared. I also provided methods of contact if there was any action that I could or needed to take to get this resolved. The video was blocked globaly very shortly after the request.

I understand that the YouTube Copyright system is not known for it’s fairness, especcially when dealing with large corporations. The main issue with this was that my site embeded the YouTube video.

I ended up re-generating the video from the MIDI and reuploading it to Niconico and adding a new embedding option.

Faster Updates (via Bad Symlinking)

Currently, there is no version control on my sheets. Due to the size of the files and diffs, it seemed like it wasn’t worth the hassle. This made it a bit hard to update the site for pieces that are labeled as “Work In Progress”. My solution was to symlink between the Nextcloud storage on the same server. This is a temporary solution and will be removed when I migrate my Nextcloud server.

Future

I am not done with this project yet. I have a list of tasks which I intend to complete before putting this on the back-burner indefinetely.

• Investigate Usage Dat Protocol

  This will allow decentraliztion of my individual scores.

• Investigage the Federation/Fediverse

  Using Federation/Fediverse-based alternatives (like GNU MediaGoblin or PeerTube) would add an extra failsafe for video hosting

• Publish Grav Plugin to Main Repository

  Now that the plugin is stable, I am ready to mirror it to GitHub and add to the list of Grav Plugins

• Contact Dev for Cytoid Site

  Cytoid might be taking a similar approach to this. I plan to reach out to the developer and see if he’s doing it in a better way than I am.

• Improve Custom Foundation 6 Theme

  This part might require some help… UI design isn’t my strong suit

• Add Tag pages to Site

  You cannot currently group by tags on the Sheets site

• Finish WIP Scores

  I aim to finish my current WIP progress scores by the end of winter break