Finalize new version

README.md

@@ -10,7 +10,7 @@ A TypeScript component that loads and plays MusicXML files in the browser using
 npm install
 npm run build
 npm test
-npm run demo
+npm run demo:develop
 ```
 Then open http://127.0.0.1:8080/
 # Theory of operation

demo/demo.mjs

@@ -157,6 +157,9 @@ async function createPlayer() {
 
 async function createRenderer(renderer, sheet, options) {
   const base = sheet.startsWith('http') || sheet.startsWith('data/') ? sheet : `data/${sheet}`;
+  document.querySelectorAll('.renderer-option').forEach(element => {
+    element.disabled = false;
+  });
   switch (renderer) {
     case 'osmd':
       return new MusicXMLPlayer.OpenSheetMusicDisplayRenderer({
@@ -174,7 +177,10 @@ async function createRenderer(renderer, sheet, options) {
         scrollOffset: 100,
       });
     case 'mscore':
-      return new MusicXMLPlayer.MuseScoreRendererConverter(base.replace(/\.musicxml$|\.mxl$/, '.mscore.json'));
+      document.querySelectorAll('.renderer-option').forEach(element => {
+        element.disabled = true;
+      });
+      return new MusicXMLPlayer.MuseScoreRenderer(base.replace(/\.musicxml$|\.mxl$/, '.mscore.json'));
   }
 }
 
@@ -194,8 +200,7 @@ async function createConverter(converter, sheet, groove) {
       }
       return new MusicXMLPlayer.MmaConverter(window.location.href + 'mma/', parameters);
     case 'mscore':
-      // FIXME Return same instance as renderer.
-      return new MusicXMLPlayer.MuseScoreRendererConverter(base.replace(/\.musicxml$|\.mxl$/, '.mscore.json'));
+      return new MusicXMLPlayer.MuseScoreConverter(base.replace(/\.musicxml$|\.mxl$/, '.mscore.json'));
   }
 }
 
@@ -482,7 +487,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   document.getElementById('audio-offset').addEventListener('change', handleAudioDelayChange);
   document.getElementById('velocity').addEventListener('change', handleVelocityChange);
   document.getElementById('repeat').addEventListener('change', handleRepeatChange);
-  document.querySelectorAll('.player-option').forEach(element => {
+  document.querySelectorAll('.renderer-option').forEach(element => {
     if (!!g_state.options[element.id.replace('option-', '')]) {
       element.setAttribute('checked', 'checked');
     }

demo/index.html

@@ -90,11 +90,11 @@ <h1>MusicXML Player Demo</h1>
       <input type="radio" id="renderer-vrv" name="renderer" value="vrv"/>
       <label for="renderer-vrv">Verovio</label>
       <input type="radio" id="renderer-mscore" name="renderer" value="mscore"/>
-      <label for="renderer-mscore">MuseScore</label>
-      <div class="player-options">
-        <input type="checkbox" class="player-option" id="option-unroll" value="unroll"/>
+      <label for="renderer-mscore">MuseScore (SVG)</label>
+      <div class="renderer-options">
+        <input type="checkbox" class="renderer-option" id="option-unroll" value="unroll"/>
         <label for="option-unroll">Unroll score</label>
-        <input type="checkbox" class="player-option" id="option-horizontal" value="horizontal"/>
+        <input type="checkbox" class="renderer-option" id="option-horizontal" value="horizontal"/>
         <label for="option-horizontal">Horizontal layout</label>
       </div>
     </div>
@@ -123,7 +123,7 @@ <h1>MusicXML Player Demo</h1>
     <div>
       <label for="outputs">MIDI output</label>
       <select id="outputs"></select>
-      <input type="checkbox" class="player-option" id="option-mute" value="mute"/>
+      <input type="checkbox" class="renderer-option" id="option-mute" value="mute"/>
       <label for="option-mute">Mute</label>
       <div>
         If you're not using the local synth, you need to connect this output to a MIDI synth like FluidSynth, TiMidity, or <a href="https://mmontag.github.io/dx7-synth-js/" target="_blank">DX7 Synth</a>.