A solution for actively displaying MuseScore projects on web pages like musescore.com
Simple demo: https://carlgao4.github.io/mscz-html/develop/sample
- Preparation:
- This module uses metadata generated by MuseScore. To generate the metadata, you need to install MuseScore and run the following command in the terminal (replace
mscoreto actual MuseScore executable name according to your OS. For example,mscorefor Linux,"C:\Program Files\MuseScore 4\bin\MuseScore4.exe"for Windows, and/Applications/MuseScore\ 4.app/Contents/MacOS/mscorefor MacOS):mscore --score-media -o <output.json> <path_to_musescore_file>
- You can remove unused keys in the JSON file to reduce the file size. Only
metadata,svgs,mposXMLandmidiare used currently.
- This module uses metadata generated by MuseScore. To generate the metadata, you need to install MuseScore and run the following command in the terminal (replace
- Link required files:
- Add the following lines to the
<head>section of your HTML file:<link rel="stylesheet" href="https://carlgao4.github.io/mscz-html/v1/css/mscz-html.min.css">
- Add the following lines to the end of the
<body>section of your HTML file:<script src="https://carlgao4.github.io/mscz-html/v1/js/mscz-html.min.js" type="module"></script>
- You can change
v1to any existing branch name or tag name in the repository to use the latest version or a specific version of the module. When the branch name containsdev, you should add an addtional directorysrcto the path. For example,https://carlgao4.github.io/mscz-html/develop/src/js/mscz-html.min.js.
- Add the following lines to the
- Add the tag where you want to display the MuseScore. This script will search for any tag with attribute
mscz-htmland replace it with the MuseScore. For example, you can add the following line to your HTML file:Please remember to replace<div mscz-html="link/to/musescore-json.json"></div>
link/to/musescore-json.jsonwith the actual link to your MuseScore JSON file. - You can also manually call the API function to display the MuseScore. The
msczHtml.displayMsczJsonfunction accept 3 arguments (the last one is optional):cssSelector: The CSS selector of the tag where you want to display the MuseScore. If a DOM element is passed, it will be used directly. e.g.document.querySelector("#musescore")or"#musescore".jsonUrl: The URL of the MuseScore JSON file. If an object is passed, it will be used directly.config: Will explain in the next section.- example:
<script> msczHtml.displayMsczJson("#musescore", "link/to/musescore-json.json", { // config options }); </script>
Config options should be an object. If rendering is triggered by the mscz-html attribute, the config options should be passed in the mscz-config attribute in json format. For example:
<div mscz-html="link/to/musescore-json.json" mscz-config="{"autoScroll": false}"></div>Here are the available keys:
- Type:
boolean - Default:
true - Description: Whether to automatically scroll to current bar when the score is playing.
- Type:
array - Default:
[] - Description: Additional preview audio files. By default, only realtime MIDI is used (rendered using
GeneralUser GS 2.0.1soundfont). You can add additional audio files to the list. The list consists of objects with the following keys:name: The name of the audio file. This will be displayed in the audio selector.url: The URL of the audio file.measures: An optional array of measure times. If not provided, will use the same as the MIDI file. The measure times should be an array of objects with the following keys:id: The index of the measure. Start from 0. A same measure can be mapped to multiple times, just by adding multiple objects with the sameid.time: The time when the measure starts. The time is in seconds.
- Type:
stringorArrayBuffer - Default:
GeneralUser - Description: The soundfont to use for rendering the MIDI file. You can use a custom soundfont by providing the URL of the soundfont file, or the builtin soundfont name. You may use
GeneralUser,FluidR3_GM,MS Basic. You can also pass an ArrayBuffer of the soundfont file directly. The soundfont file should be in SF2 or SF3 format.
- Type:
number - Default:
330 - Description: A number of DPI for exporting images (default: 330). To set this parameter, you need to add
-r [DPI]to the command line when running you convert the mscz file to json. If not set, will try to read from pngs in the json file. If not found, will use 330.