Program to convert MuseScore to html5-webpage showing score synchronized to audio/video.

• May 15, 2012 - 10:19

Hello all,
I have made a command line utility that converts MuseScore to an html5-file (webpage).
When the html file is opened in a browser it plays an audio file (.ogg/.mp3) or a video file (.webm/.mp4) and shows the score synchronized with the audio. The html file behaves like a progress bar for the media file. You can flip pages, click anywhere in the score and playback resumes from that point onward.

Here are a couple of webpages produced by
I'll never sing another song , video performance of Muriel Anderson
Prelude BWV 539 , synthesized brass instruments
Prelude BWV 539 , video performance of Caroline Bembia

You can download the software and documentation from the mscweb page

No Flash is used. The converted page is pure html. The media files are played with an html5 audio/video element. Tested with Firefox, Opera and Chrome. I cannot test IE, and I bet it won't work.


PS. Bug reports are very welcome.


In reply to by ChurchOrganist

Great work indeed! I assume most here are aware of this, but for those who are not, already provides the ability to create scores synchronized with video like this, but not currently for arbitrary audio files. Playback is limited the built in synthesizer using the default soundfont or synchronization with a YouTube video. In one instance, I went ahead and created a slide show video with my audio as the soundtrack, then posted that to YouTube, just to get the ability to have my own audio synchronized with my one of my scores.

In reply to by willem179

Yes, I didn't mean to downplay the significance of what you've done! Having control on your own site is good, as is the ability to sync audio files rather than just video. offers complementary strengths, I would say - a community-oriented site that facilitates uploading/downloading/sharing of scores, comments and discussion groups, etc. I imagine a lot of people would find use for both.

I think I had seen posts about the ABC version of this in the ABC mailing list, but for some reason hadn't fully realized what you had achieved. Remarkable!

I may have found a bug. When I tried exporting MusicXML, PNG and OGG files from MuseScore and running you Python script, it produced HTML5 which worked but got the sound playback associated with the wrong PNG files - there was a PNG per page of music, and they displayed in the wrong sequence, so out of sync with the sound playback.

I'm running Firefox on Ubuntu 12.04. I'm not familiar with Python, but my son is, so we may have a look at the code and see if we can understand what's going on.

The idea is great though, and your examples have got me quite enthusiastic. Good stuff even if there are any bugs.

In reply to by Jon Foote

Thank you, Jon, for reporting this order problem. The order of the png files is simply determined by the number suffix. These are added by MuseScore when you "save as png".
I think I may have to add a sort statement in the Python code. There may be differences in the order in which the system retrieves the files, dependent on the platform.
Now I think about it, while writing, I begin to feel sure that this is indeed what you experience. I will try my Ubuntu system (which i did not test yet) and update the program today, when my present diagnosis turns out to be true.


I updated the documentation on the web page yesterday and added an extra step in the example which avoids another lay-out problem.
PS-1: (edit)
I have uploaded version-05 to the website, which corrects the order bug. Thanks again for pointing out the problem, which indeed also occurs on my Ubuntu.

I love this. The one suggestion I would make is, if it is possible, have a way to have the page-turn happen at the end of the second-to-last system so that one could keep an eye on what is coming up. (I am pondering whether I could use this to help not terribly advanced choir members to learn their parts.)

P.S. I also liked the instrumentation you used for the Bach.

In reply to by Jake Sterling

Thanks, Jake, for your remarks. I am willing to look into the possibility to include an option for your "page flip at the end of the second-to-last system". However, first I need to understand what "second-to-last system" means! Could you, perhaps, mail me at "willem179 at gmail dot com" with a more precise explanation of the moment where you expect the page flip? And should the cursor wait on the next page until the playback catches up? Do you really mean "system" and not "measure"?
- Willem

Hello, I have updated mscweb with small corrections that also make IE9 display and play the pages correctly. The examples have also been updated, so IE9 users could check:
video performance of Muriel Anderson
bwv539 with synthesized brass instruments
bwv539, video performance of Caroline Bembia on harp
The examples have been tested with Firefox, Opera, Chrome and IE9.
(Don't forget to press the play button when the score has been loaded)



(Sorry for my English, I´m from Spain...)
I need to show in the screen one page with only one system at time so my scores become in very large ones (25,35 even 40 systems).
When the green cursor comes to page 10 or 11 everything goes wrong.
Can this be corrected?
Thank you to read this message.

Do you still have an unanswered question? Please log in first to post your question.