What's the score? Syncing sheet music with YouTube videos of performances

I have been studying how to write music for orchestra on and off over the years, as a bit of a hobby. A useful technique for learning orchestration is to study scores, and thanks to IMSLP it’s quite easy to get copies of the full score for works that are in the public domain. But it can be a bit of a faff sometimes to sit with your PDF copy of a score and try and follow along with a Spotify recording of the piece. It’s quite easy to lose your place if you get distracted, and it’s hard to jump into the middle of a piece. It’s also hard to nudge the recording into the right position if you want to here the same passage again.

To help with that problem, I have built a little web app that will display an orchestral score alongside a YouTube video of the piece being performed, and keep the two in sync with each other – if you move the YouTube video, the score will jump to the correct page; if you change page in the score, the YouTube video will jump to the right part of the recording. The page will attempt to resize the score and the video to fit the size of your screen: I’d suggest using it on the biggest monitor you can.

You can find the app at https://orchestra.netlify.app/.

When in action, it looks a bit like this:

I have set the site up with the scores for five pieces:

• The beautiful slow second movement from Beethoven’s 7th Symphony
• The lively first movement of Dvorak’s 8th Symphony
• Mars, from The Planets by Holst
• Janacek’s Sinfonietta
• The Trauermarsch, the first movement of Mahler’s fifth Symphony

The criteria for choosing these pieces is quite straightforward:

• The scores must be in the public domain
• I must be able to find a good quality PDF of the score, preferably with a file size that isn’t too large
• There must be good quality, embeddable videos of recordings of the pieces of them on YouTube (preferably a good quality video of a live orchestra)
• They must be pieces I like myself

There’s no real technological magic to make this happen – I have just manually been through all of these scores and encoded the time of the YouTube video for all the page turns. But it’s also only really possible because both the YouTube widget and Mozilla’s PDF.js have handy APIs that we can easily hook into with a bit of JavaScript to control their behaviour.

The weakness of the whole setup is actually also the thing that makes it possible at all – that the scores themselves are in PDF format. While PDFs are easily accessible online, they are often also large files that can be slow to render in a browser. As a result, the initial load of the app is often slow when you choose a piece, since we need to load the PDF in full before we can start playing. The page turning can be a little sluggish in places too, especially when the PDF is very large.

There are other small bugs, as all kinds of race conditions are possible and I’ve not made much effort at all to handle them. I also realised when I got to the Janacek that I’d set it up so that you could only turn pages forwards, which made it a bit of a mess to display the right music when there’s a repeat (and there are loads of repeats in the Sinfonietta). I assume at some point in the distant future the YouTube videos might disappear too, which would obviously ruin the whole thing. For me it currently works about 80-90% of the time, which is good enough for what I’m using it for, so I’ll probably never fix any of those things. But if it’s useful to you too, good luck!