[FEATURE] Provide MIDI player (kitodo#1752)

Author: markusweigelt

.github/codeql.yml

@@ -16,4 +16,4 @@ paths-ignore:
   - Resources/Public/JavaScript/OpenLayers
   - Resources/Public/JavaScript/Toastify
   - Resources/Public/JavaScript/Verovio
-  - Resources/Public/JavaScript/WildWebMidi
+  - Resources/Public/JavaScript/HtmlMidiPlayer

Classes/Controller/PageViewController.php

@@ -136,9 +136,9 @@ public function mainAction(): ResponseInterface
         }
 
         $this->scores = $this->getScore($page);
+        $this->view->assign('scores', $this->scores);
         $this->measures = $this->getMeasures($page);
 
-
         $this->view->assign('images', $this->images);
         $this->addViewerJS();
 

Classes/Controller/ToolboxController.php

@@ -86,7 +86,6 @@ private function renderTools(): void
                     'tx_dlf_imagemanipulationtool', 'imagemanipulationtool' => $this->renderToolByName('renderImageManipulationTool'),
                     'tx_dlf_modeldownloadtool', 'modeldownloadtool' => $this->renderToolByName('renderModelDownloadTool'),
                     'tx_dlf_pdfdownloadtool', 'pdfdownloadtool' => $this->renderToolByName('renderPdfDownloadTool'),
-                    'tx_dlf_scoredownloadtool', 'scoredownloadtool' => $this->renderToolByName('renderScoreDownloadTool'),
                     'tx_dlf_scoretool', 'scoretool' => $this->renderToolByName('renderScoreTool'),
                     'tx_dlf_searchindocumenttool', 'searchindocumenttool' => $this->renderToolByName('renderSearchInDocumentTool'),
                     'tx_dlf_viewerselectiontool', 'viewerselectiontool' => $this->renderToolByName('renderViewerSelectionTool'),
@@ -293,6 +292,9 @@ public function renderScoreTool()
             return;
         }
 
+        if (isset($this->settings['midiPlayerSoundFont'])) {
+            $this->view->assign('scoreMidiPlayerSoundFont', $this->settings['midiPlayerSoundFont']);
+        }
         $this->view->assign('score', !empty($this->getScoreFile()));
     }
 

Configuration/TypoScript/setup.typoscript

@@ -45,8 +45,7 @@ page {
     kitodo-saveas = EXT:dlf/Resources/Public/JavaScript/Verovio/saveas.js
     kitodo-pdf= EXT:dlf/Resources/Public/JavaScript/Verovio/pdfkit.js
     kitodo-pdfkita = EXT:dlf/Resources/Public/JavaScript/Verovio/blobstream.js
-    kitodo-wildWebMidi = EXT:dlf/Resources/Public/JavaScript/WildWebMidi/wildwebmidi.js
-    kitodo-webAudioPlayer = EXT:dlf/Resources/Public/JavaScript/WildWebMidi/web_audio_player.js
+    kitodo-htmlmidiplayer = EXT:dlf/Resources/Public/JavaScript/HtmlMidiPlayer/combined-html-midi-player.min.js
 
     # PageView plugin
     kitodo-openLayers = EXT:dlf/Resources/Public/JavaScript/OpenLayers/openlayers.js

Documentation/Plugins/Index.rst

@@ -1007,6 +1007,7 @@ Toolbox
        * tx_dlf_pdfdownloadtool
        * tx_dlf_fulltextdownloadtool
        * tx_dlf_searchindocumenttool
+       * tx_dlf_scoretool
 
  - :Property:
        solrcore
@@ -1065,6 +1066,35 @@ This tool makes it possible to extract the model URL from the METS file or use t
 
 :typoscript:`plugin.tx_dlf_modeldownloadtool.`
 
+Score tool
+^^^^^^^^^^^^^
+
+This tool extracts the score from the `SCORE` file group and visualizes the MEI score of current page using `Verovio <https://www.verovio.org/index.xhtml>`_.
+
+The provided MIDI output of `Verovio` is played using the `html-midi-player <https://cifkao.github.io/html-midi-player/>`_
+
+:typoscript:`plugin.tx_dlf_scoretool.`
+
+.. t3-field-list-table::
+ :header-rows: 1
+
+ - :Property:
+       Property
+   :Data Type:
+       Data type
+   :Values:
+       Values
+
+ - :Property:
+       midiPlayerSoundFont
+   :Data Type:
+       :ref:`t3tsref:data-type-string`
+   :Values:
+        * `default` or if the property is not set, the MIDI player will use a simple oscillator synth
+        * `build-in` or if the property is empty, the build-in sound font (`https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus`) of MIDI player is used
+        *  Custom URL to sound font e.g. `https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus`
+
+
 Viewer selection tool
 ^^^^^^^^^^^^^
 

Resources/Private/Templates/Toolbox/Main.html

@@ -172,7 +172,7 @@
                 </a>
             </li>
             <li class="score">
-                <a id="tx-dlf-tools-midi" >
+                <a id="tx-dlf-tools-score-midi" <f:if condition="{scoreMidiPlayerSoundFont}">data-midi-player-sound-font="{scoreMidiPlayerSoundFont}"</f:if>>
                     <f:translate key="tools.score.player"/>
                 </a>
             </li>
@@ -215,11 +215,11 @@
                 <span class="tx-dlf-tools-score">
                     <f:if condition="{scoreLinks}">
                         <f:then>
-                            <a href="#" id="tx_dlf_mididownload" class="download-document">
+                            <a href="#" id="tx-dlf-score-midi-download" class="download-document">
                                 <f:translate key="mididownload"/>
                                 (MIDI)
                             </a>
-                            <a href="#" id="tx_dlf_scoredownload" class="download-document">
+                            <a href="#" id="tx-dlf-score-download" class="download-document">
                                 <f:translate key="scoredownload"/>
                                 (PDF)
                             </a>

Resources/Public/JavaScript/HtmlMidiPlayer/combined-html-midi-player.min.js

@@ -27,7 +27,7 @@ const verovioSettings = {
   breaks: 'encoded',
   mdivAll: true
 };
-const className = 'score-visible';
+const className = 'tx-dlf-score-visible';
 const scrollOffset = 100;
 var zoom = 40;
 var format = 'mei';
@@ -55,6 +55,43 @@ dlfScoreUtil.fetchScoreDataFromServer = function (url, pagebeginning) {
       tk.renderData(jqXHR.responseText, verovioSettings);
       const pageToShow = tk.getPageWithElement(pagebeginning);
       const score = tk.renderToSVG(pageToShow);
+      const midi = tk.renderToMIDI();
+
+      $("#tx-dlf-tools-score-midi").click(function () {
+        const midiPlayer = document.getElementById("tx-dlf-score-midi-player");
+        let soundFont = null;
+        if($(this).is('[data-midi-player-sound-font]')) {
+          const soundFontSetting = $(this).data('midi-player-sound-font');
+          if (soundFontSetting === '' || soundFontSetting === 'build-in') {
+            soundFont = '';
+          } else if (soundFontSetting !== 'default') {
+            soundFont = soundFontSetting;
+          }
+        }
+
+        const $body = $('body');
+        midiPlayer.src = 'data:audio/midi;base64,' + midi;
+        midiPlayer.shadowRoot.querySelector('button[part="play-button"]').click();
+        midiPlayer.soundFont = soundFont;
+        midiPlayer.addEventListener('stop', (event) => {
+          if (event.detail.finished) {
+            $body.removeClass('tx-dlf-score-midi-active')
+          }
+        })
+        $body.toggleClass('tx-dlf-score-midi-active')
+        if ($body.hasClass('tx-dlf-score-midi-active')) {
+          setTimeout(() => {
+            midiPlayer.shadowRoot.querySelector('button[part="play-button"]').click();
+          }, 500);
+        }
+      });
+
+      $("#tx-dlf-score-midi-download").click(function () {
+        $(this).attr({
+          "href": 'data:audio/midi;base64,' + midi,
+          "download": getMeiTitle(tk) + ".midi"
+        })
+      });
 
       if (score === undefined) {
         result.reject();
@@ -303,7 +340,7 @@ dlfViewerScoreControl.prototype.loadScoreData = function (scoreData, tk) {
     })
   );
 
-  $("#tx_dlf_scoredownload").click(function () {
+  $("#tx-dlf-score-download").click(function () {
     if (typeof pdfBlob !== 'undefined') {
       saveAs(pdfBlob, getMeiTitle(tk));
 
@@ -502,8 +539,8 @@ dlfViewerScoreControl.prototype.disableScoreSelect = function () {
 
   $('#tx-dlf-score-' + this.dlfViewer.counter).removeClass(className).hide();
   $('#tx-dfgviewer-map-' + this.dlfViewer.counter + ' .ol-overlaycontainer-stopevent').hide();
-  $('#tx-dfgviewer-map-' + this.dlfViewer.counter + ' ~ .score-tool #tx-dlf-tools-midi').hide();
-  $('.document-view:not(.multiview) .document-functions #tx-dlf-tools-midi').hide();
+  $('#tx-dfgviewer-map-' + this.dlfViewer.counter + ' ~ .score-tool #tx-dlf-tools-score-midi').hide();
+  $('.document-view:not(.multiview) .document-functions #tx-dlf-tools-score-midi').hide();
 
   $('body').removeClass(className);
 
@@ -538,7 +575,7 @@ dlfViewerScoreControl.prototype.enableScoreSelect = function () {
 
   $('body').addClass(className);
 
-  $('.document-view:not(.multiview) .document-functions #tx-dlf-tools-midi').show();
+  $('.document-view:not(.multiview) .document-functions #tx-dlf-tools-score-midi').show();
 
   this.scrollToPagebeginning();