Program to convert MuseScore to html5-webpage showing score synchronized to audio/video.
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 mscweb.py:
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.
Willem
PS. Bug reports are very welcome.
Comments
Very well done Willem. Thanks for sharing.
How long did you work on this you think?
In reply to Great hack! by Thomas
Certainly doesn't work in IE8. Works very nicely in Firefox though, which is all that matters to me. I expect to find this useful - thanks.
In reply to Great hack! by Thomas
About a week, Thomas.
But I already made a similar program for ABC-notation. You can see it here (with the same examples).
Willem
Brilliant stuff Willem.
I have bookmarked your page as I can foresee it may have great use in teaching.
Regards
Michael
In reply to Brilliant stuff Willem. I by ChurchOrganist
Great work indeed! I assume most here are aware of this, but for those who are not, musescore.com 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 Great work indeed! I assume by Marc Sabatella
Indeed, Marc, my program does about the same thing as what musescore.com offers. As you explained, the difference is that everything remains on your own machine. And is yours to edit.
I prefer to have full control over what I show on the web and how it looks.
Willem
In reply to difference with musescore.com 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. musescore.com 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 I may have found a bug. When 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.
Willem
PS.
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.
Any chance to get this to work in IE8 too?
In reply to Any chance to get this to by Jojo-Schmitz
No, I would have to use Flash, and probably add a lot of code to circumvent all other non-W3C-compliant quirks of IE8. But I understand that Microsoft is moving towards html5 compatibility, so may be it already works in IE10.
Willem
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 Very cool! 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)
Willem
//wim.vree.org/mscweb/
This is very nice!
I''ll also recommend the plugin Batch Export (http://musescore.org/nb/project/batchexport), with it you could do all the exports in one single operation.
Thanks for the script!
(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.