koha-tmpl/opac-tmpl/bootstrap/js/verovio.js

   1 /* global PREF_OPACPlayMusicalInscripts interface verovio */
   2 $(document).ready(function() {
   3     if( $(".musical_inscripts").length > 0 ){
   4
   5         // Check support for WebAssembly
   6         // https://stackoverflow.com/questions/47879864/how-can-i-check-if-a-browser-supports-webassembly
   7         var webassenbly_supported = (() => {
   8             try {
   9                 if (typeof WebAssembly === "object"
  10                     && typeof WebAssembly.instantiate === "function") {
  11                     const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
  12                     if (module instanceof WebAssembly.Module)
  13                         return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
  14                 }
  15             } catch (e) {
  16             }
  17             return false;
  18         })();
  19
  20         if( webassenbly_supported ){
  21
  22             $.ajaxSetup({
  23                 cache: true
  24             });
  25
  26             $.getScript( interface + "/lib/verovio/verovio-toolkit.js", function( data, textStatus, jqxhr ) {
  27                 $('.musical_inscripts .inscript').each(function() {
  28                     var vrvToolkit = new verovio.toolkit();
  29                     var $t = $(this);
  30                     var data = "@clef:"+$t.data('clef')+"\n@keysig:"+$t.data('keysig')+"\n@timesig:"+$t.data('timesig')+"\n@data:"+$t.data('notation')+"\n";
  31                     var svg = vrvToolkit.renderData(data, {
  32                         inputFormat: $t.data('system'),
  33                         spacingStaff: 0,
  34                         adjustPageHeight: 1,
  35                         scale: 40,
  36                         pageHeight: 300
  37                     });
  38                     $t.html(svg);
  39                     var base64midi = vrvToolkit.renderToMIDI();
  40                     var song = 'data:audio/midi;base64,' + base64midi;
  41                     var play_btn = $('.play_btn', $t.parent());
  42                     if(play_btn.length) {
  43                         play_btn.data('song', song);
  44                         play_btn.data('toolkit', vrvToolkit);
  45                     }
  46                 });
  47                 if( PREF_OPACPlayMusicalInscripts ){
  48                     $(".audio_controls").show();
  49                     var playmusic_1 = $.getScript( interface + "/lib/verovio/000_acoustic_grand_piano.js" );
  50                     var playmusic_2 = $.getScript( interface + "/lib/verovio/midiplayer.js" );
  51                     $.when( playmusic_1, playmusic_2 ).done(function () {
  52
  53                         var ids = [];
  54
  55                         var currentToolkit;
  56                         var player = $('.inscript_audio');
  57
  58                         var midiUpdate = function(time) {
  59                             // time needs to - 400 for adjustment
  60                             var vrvTime = Math.max(0, time - 400);
  61                             var elementsattime = currentToolkit.getElementsAtTime(vrvTime);
  62                             if (elementsattime.page > 0) {
  63                                 if ((elementsattime.notes.length > 0) && (ids != elementsattime.notes)) {
  64                                     ids.forEach(function(noteid) {
  65                                         if ($.inArray(noteid, elementsattime.notes) == -1) {
  66                                             $("#" + noteid).attr("fill", "#000").attr("stroke", "#000");
  67                                         }
  68                                     });
  69                                     ids = elementsattime.notes;
  70                                     ids.forEach(function(noteid) {
  71                                         if ($.inArray(noteid, elementsattime.notes) != -1) {
  72                                             $("#" + noteid).attr("fill", "#c00").attr("stroke", "#c00");
  73                                         }
  74                                     });
  75                                 }
  76                             }
  77                         };
  78
  79                         var midiStop = function() {
  80                             ids.forEach(function(noteid) {
  81                                 $("#" + noteid).attr("fill", "#000").attr("stroke", "#000");
  82                             });
  83                             player.hide();
  84                         };
  85
  86                         if(player.length) {
  87                             player.midiPlayer({
  88                                 locateFile: function(file) {
  89                                     return interface + '/lib/verovio/'+file;
  90                                 },
  91                                 color: "#c00",
  92                                 onUpdate: midiUpdate,
  93                                 onStop: midiStop
  94                             });
  95                         }
  96
  97                         $('.musical_inscripts .play_btn').click(function() {
  98                             var $t = $(this);
  99                             player.show();
 100                             currentToolkit = $t.data('toolkit')
 101                             player.midiPlayer.play($t.data('song'));
 102                         });
 103                     });
 104                 }
 105             });
 106         }
 107     }
 108 });