MuseScore2Html

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 :

AllMyMusic.html

Examples of handcrafted html-file from multiple scores with use of generated files :

Composition.html

See https://github.com/music4classicalguitar/musescore2html .

How it works and how to generate files with MuseScore without use of 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

Contents of zip-files and dowload-links

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

Content of ms_player_index.zip (download link):

css/ms_player_index.css
js/ms_player_query.js

Stylesheet used :

musescore_mpos.xsl

Scores used in these examples :