MuseScore2Html is an application used to generate html-files from MuseScore scores which you can use on your own website.
See https://github.com/music4classicalguitar/musescore2html
Examples of generated files :
If needed an index-file with links to all or a selection of html-files of the scores can be generated.
Examples of generated index-file :
Examples of handcrafted html-file from multiple scores with use of generated files :
See https://github.com/music4classicalguitar/musescore2html.
ms_player.js is a javascript which can be used to show a MuseScore score as a webpage.
There are two zip-files, ms_player.zip (contents) which can be used to show the scores
and ms_player_index.zip (contents) which can be used to show an index-file with links to all scores.
To show a MuseScore score "'MyComposition.mscz" as a webpage, you can use the commandline interface of MuseScore to generate the files needed as follows.
Note: Only the png-, mp3- and ogg-files can also be generated by using the gui.
If your score is located in folder 'Music' and you want to place the files in a folder "Sites" use:
To generate the images of the pages for the score:
mscore -cli -o "Sites/MyComposition.png" "Music/MyComposition.mscz"
To generate the audio for the score:
mscore -cli -o "Sites/MyComposition.mp3" "Music/MyComposition.mscz"
mscore -cli -o "Sites/MyComposition.ogg" "Music/MyComposition.mscz"
To generate the meta-information for the score (number of pages, number of measures, ...):
mscore -cli -o "Sites/MyComposition.metajson" "Music/MyComposition.mscz"
To generate the information about measures for the score (position of measures on a page, audio-position of measures):
mscore -cli -o "/tmp/MyComposition.mpos" "Music/MyComposition.mscz"
This is a XML-file. To convert this file to a json-file for use with javascript use the stylesheet musescore_mpos.xsl with e.g. saxon.
If musescore_mpos.xsl is located in a directory xsl:
java -cp saxon-he-10.3.jar net.sf.saxon.Transform -s:/tmp/MyComposition.mpos -xsl:xsl/musescore_mpos.xsl -o:Sites/MyComposition_space.json
Create a html-file "Sites/MyComposition.html" with content:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript" src="js/ms_player.js"></script> <title>Begin</title> </head> <body> <script type="text/javascript"> ms_player.load("MyComposition"); </script> </body> </html>
Unzip ms_player_index.zip (see contents) in directory 'Sites'.
Now you should be able see your score as a web-page by opening Sites/MyComposition.html.
To combine several scores in one page you can use "tagId" to inform ms_player in which element to place the score within a webpage.
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript" src="js/ms_player.js"></script> <title>Compostion</title> </head> <body> <h1>Composition</h1> <table border="1"> <tr><th>Part</th><th>Example</th><th>Comment</th></tr> <tr><td>Begin</td><td id="notes_Begin" style="width: 100%; height: 260px"></td><td style="white-space: nowrap;">Start with this</td></tr> <tr><td>Middle</td><td id="notes_Middle" style="height: 260px"></td><td style="white-space: nowrap;">Continue with this</td></tr> <tr><td>End</td><td id="notes_End" style="height: 260px"></td><td style="white-space: nowrap;">Stop with this</td></tr> </table> <script type="text/javascript"> ms_player.load("Begin", { tagId : "notes_Begin"}); ms_player.load("Middle", { tagId : "notes_Middle"}); ms_player.load("End", { tagId : "notes_End"}); </script> </body> </html>
See Composition.html
Content of ms_player.zip (download link):
css/ms_player.css images/media-playback-loop.svg images/media-playback-metronome.svg images/media-playback-pause.svg images/media-playback-start.svg images/media-skip-backward.svg images/media-skip-forward.svg images/window-close.svg js/ms_player.js
css/ms_player_index.css js/ms_player_query.js
Stylesheet used :
Scores used in these examples :