How To Embed a Score+audio/Video player to your Webpage

By | January 11, 2020


Hi, How to create a embeddable score player for your webpage Here is a example of an embeddable score player for your webpage as you can see i can scroll through it I can skip to the next page I can skip back i can skip to a measure/bar (hit enter) I can skip back to the first i can hit play It syncs perfect with synthesized music I do not know how well it is coming across with my screen capture but I assure you it syncs perfect when the blue cursor goes on a note it plays it. i can click anywhere on a staff and it will go to that position, I can click play and it will play it from there Lets have a look at the original developers webpage where he as synched it with video Well that will not do, you cant see the video. I have to zoom out as you see I have made some changes mine, I have a play
panel that always stays open top even when the score scrolls behind it and on this one it doesn’t (lets go over here) my version is not really optimized it for video yet I was thinking of putting video over here somewhere and uh… having the score in the coming
up to here but that is on my to do list okay lets have a look at how you can
accomplish this on your own website you need musescore 1.2 once you’ve created your score set a tempo by selecting a note and
right-clicking above the staff and going to tempo i’ve selected moderate which is 112 beats per minute Now open the play panel make sure this is the same as the same as your tempo sometimes they are different for some reason they have to be the same (some for some reason. They have to be the same. Now turn off repeats, unfortunately the embeddable score
player doesn’t like repeats and doesn’t play
them so turn them off here so that when you export the audio file it doesn’t have the repeats Go to layout, page settings make sure two sided is off turn it off it does not like that either now go file save as scroll down to ogg vorbis click save takes a while the ogg vorbis got to love those open file formats, right? they are awesome okay I think thats done, now save as PNG there we go and once more last one XML file musicXML save lets for to that folder there we go, lets open up that okay as you can see those are the files i
need click Start, run, open up the command I will include a link to my version
of this with the nice little play panel also the original is in here I have created a python version and a .exe version the sake of this tutorial I will use the .exe version simply click on it and drag it into the command prompt you just opened see command line is not scary hit space now drag over the XML great now hit enter if all went well there should be no output goto now you see there is a html but its missing some files that needs which are these play panel files so I am going copy of those over. you don’t need these you’re using the
original So I am going to right-click copy paste or
control c control v How ever you like to do it I am holding a microphone so I can only use
one hand okay now that those are there if you are uploading this to the internet you should compress the png files that
you exported from musescore especially if it’s three or four pages long your even ten pages
long because you have to upload those and someone people viewing your web page have to
download that data, so compress them I will use this program to do it I do not recommend freeware programs, this is a freeware. I was lazy if you can find a open source program
that does the same thing then use that but I am just going to use this for now, so optimize as you can see its compressed by forty seven percent if its multiple pages long you can see that this would make a big
difference you don’t need to upload that XML you can get rid of that now Lets open up the html to have a look as i mentioned before that this is
perfectly in sync but i don’t know how it’s looking with the screen capture so I will hit play and look at that you wouldn’t even be able
to tell that it has being compressed it looks nice and it is half the file size it was before another thing to note this doesn’t work in internet explorer ’cause internet explorer crap now how to embedd it so first obviously you need to upload these files to your server some where lets have a look at this line of code i’ll use a iframe to integrated it some people may look down on you for
using a iframe but in this case i think it’s appropriate. but some people have this hatred for iframes change the directory of the html adjust the width and height to suite your web page border is optional you can delete that you do need this and this here is uh… grayish color you can change
a that to what ever color you want obviously This complete script is under the gnu license so it’s the gpl gpl2 i think so you can modify it do whatever you want with it I will include a link to both the python version and the windows executable version my version and the original version, also a link to the original
developers web site so So I hope you can use this, I hope to see more score players like this on the internet Hope you found this helpful see you later have a good day that’s the end of this uh… video tutorial

One thought on “How To Embed a Score+audio/Video player to your Webpage

Leave a Reply

Your email address will not be published. Required fields are marked *