mei-player.xhtml

---
layout: viewer
title: Verovio MEI Viewer
active: mei-viewer
midiplayer: false
downloads:
    - name: "Chopin op.10/9"
      description: "Etude, 3 pages - 400Kb"
      link: "Chopin_Etude_op.10_no.9.mei"
      audio: "Guiomar_Novaes_Etude_Op_10_No_9_in_F_minor_Chopin"
---

<script type="text/javascript">
//<![CDATA[
    var vrvToolkit = new verovio.toolkit();
    var page = 1;
    var zoom = 40;
    var pageHeight = 2970;
    var pageWidth = 2100;
    var spacingSystem = 2;
    var swipe_pages = false;
    var log = false;
    var format = 'mei';
    var outputFilename = 'output.mei' 
    var syncData  = [];
    var audioClock;
    var audioIndex;
    var ids = [];
    
    // reload cookies
    if ( $.cookie('zoom') ) zoom = $.cookie('zoom');
    //console.log(zoom);
    
    function set_options( ) {
        pageHeight = ($(document).height() - $( "#navbar" ).height() - 4) * 100 / zoom ;
        pageWidth = ($(document).width()) * 100 / zoom ; // - $( "#sidbar" ).width();
        options = {
                    adjustPageHeight: true,
                    breaks: "auto",
                    inputFormat: format,
                    pageHeight: pageHeight,
                    pageWidth: pageWidth,
                    footer: "none",
                    scale: zoom,
                    spacingSystem: spacingSystem
                };
        //console.log( options );
        vrvToolkit.setOptions( options );
    }
    
    function load_data(data) {
        set_options();
        
        // console.time("loading");
        try {
            vrvToolkit.loadData(data);
            // Also render to midi for sync
            var base64midi = vrvToolkit.renderToMIDI();
            if (log) {
                str = vrvToolkit.getLog();
                $("#log_p").html( str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\n/g, "<br/>") );
            }

            $("#total_text").html(vrvToolkit.getPageCount());
            page = 1;
            load_page();
            $("#play-button").show();
        }
        catch(err) {
            $("#overlay").hide().css("cursor", "auto");
            $('#err').html(err);
            $('#errorDialog').modal();
        }
        // console.timeEnd("loading");
    }

    function load_page() {
        $("#overlay").hide().css("cursor", "auto");
        $("#jump_text").val(page);

        svg = vrvToolkit.renderToSVG(page, {});
        $("#svg_output").html(svg);

        adjust_page_height();
    };

    function next_page() {
        if (page >= vrvToolkit.getPageCount()) {
            return;
        }

        page = page + 1;
        load_page();
    };

    function prev_page() {
        if (page <= 1) {
            return;
        }

        page = page - 1;
        load_page();
    };

    function first_page() {
        page = 1;
        load_page();
    };
    
    function last_page() {
        page = vrvToolkit.getPageCount();
        load_page();
    };

    function apply_zoom() {
        $.cookie('zoom', zoom, { expires: 30 });
        set_options();
        var measure = 0;
        if (page != 1) {
            measure = $("#svg_output .measure").attr("id");
        }
        
        vrvToolkit.redoLayout();

        $("#total_text").html(vrvToolkit.getPageCount());
        page = 1;
        if (measure != 0) {
            page = vrvToolkit.getPageWithElement(measure);
        }
        load_page();
    }

    function zoom_out() {
        if (zoom < 20) {
            return;
        }

        zoom = zoom / 2;
        apply_zoom();
    }

    function zoom_in() {
        if (zoom > 80) {
            return;
        }

        zoom = zoom * 2;
        apply_zoom();
    }

    function do_page_enter(e) {
        key = e.keyCode || e.which;
        if (key == 13) {

            text = $("#jump_text").val();

            if (text <= vrvToolkit.getPageCount() && text > 0) {
                page = Number(text);
                load_page();
            } else {
                $("#jump_text").val(page);
            }

        }
    }

    function do_zoom_enter(e) {
        key = e.keyCode || e.which;
        if (key == 13) {
            text = $("#zoom_text").val();
            zoom_val = Number(text.replace("%", ""));
            if (zoom_val < 10) zoom_val = 10;
            else if (zoom_val > 160) zoom_val = 160;    
            zoom = zoom_val;
            apply_zoom();
        }
    }
    
    function adjust_page_height() {
        // adjust the height of the panel
        if ( $('#svg_panel svg') ) {
            zoomed_height = pageHeight * zoom / 100;
            if ( zoomed_height < $('#svg_panel svg').height() ) {
                zoomed_height = $('#svg_panel svg').height();
            }
            $('#svg_output').height( zoomed_height ); // slighly more for making sure we have no scroll bar    
            //$('#svg_panel svg').height(pageHeight * zoom / 100 );
            //$('#svg_panel svg').width(pageWidth * zoom / 100 );    
        }
        
        // also update the zoom control
        $("#zoom_text").val(zoom + "%");
        
        // enable the swipe (or not)
        enable_swipe( ( $('#svg_panel svg') && ( $('#svg_panel svg').width() <= $('#svg_panel').width() ) ) );
    }
     
    function swipe_prev(event, direction, distance, duration, fingerCount) {
          prev_page();
     }

     function swipe_next(event, direction, distance, duration, fingerCount) {
         next_page();
     }

     function swipe_zoom_in(event, target) {
         zoom_in();
     }
    
     function swipe_zoom_out(event, target) {
         zoom_out();
     }
    
    function enable_swipe( pages ) {
        if ( pages && !swipe_pages ) {
            $("#svg_output").swipe( "destroy" );
            $("#svg_output").swipe( { swipeLeft: swipe_next, swipeRight: swipe_prev, tap: swipe_zoom_in, doubleTap: swipe_zoom_out, allowPageScroll:"auto"} );
            swipe_pages = true;
        }
        // zoom only
        else if ( !pages && swipe_pages ) {
            $("#svg_output").swipe( "destroy" );
            $("#svg_output").swipe( { tap: swipe_zoom_in, doubleTap: swipe_zoom_out, allowPageScroll:"auto"} );
            swipe_pages = false;        
        }
    }

    function getParameterByName(name) {
        var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }
    
    function play_midi() {
        var base64midi = vrvToolkit.renderToMIDI();
        var song = 'data:audio/midi;base64,' + base64midi;
        $("#player").show();
        $("#play-button").hide();
        $("#player").midiPlayer.play(song);
    }
    
    var midiUpdate = function(time) {
        var vrvTime = Math.max(0, time);
        var elementsattime = vrvToolkit.getElementsAtTime(vrvTime);
        if (elementsattime.page > 0) {
            if (elementsattime.page != page) {
                page = elementsattime.page;
                load_page();
            }
            if ((elementsattime.notes.length > 0) && (ids != elementsattime.notes)) {
                ids.forEach(function(noteid) {
                    if ($.inArray(noteid, elementsattime.notes) == -1) {
                        $("#" + noteid ).attr("fill", "#000");
                        $("#" + noteid ).attr("stroke", "#000"); 
                        //$("#" + noteid ).removeClassSVG("highlighted"); 
                    }
                });
                ids = elementsattime.notes;
                ids.forEach(function(noteid) {
                    if ($.inArray(noteid, elementsattime.notes) != -1) {
                    //console.log(noteid);
                        $("#" + noteid ).attr("fill", "#c00");
                        $("#" + noteid ).attr("stroke", "#c00");; 
                        //$("#" + noteid ).addClassSVG("highlighted"); 
                    }
                }); 
            }
        }
    }
 
    function onAudioUpdate() {
        //console.log($("#audioPlayer").currentTime);
        var currentTime = document.getElementById("audioPlayer").currentTime * 1000;
        var i = audioIndex;
        var frame = currentTime / 1024 * 44100;
        for (i = audioIndex; i < syncData.dataset.point.length; i++) {
            if (syncData.dataset.point[i].mapframe > frame) {
                break;
            }
        }
        audioIndex = i;
        var mapSyncTime = syncData.dataset.point[i].mapframe * 1024 / 44100;
        var syncTime = syncData.dataset.point[i].frame * 1024 / 44100;
        syncTime = Math.floor((syncTime + currentTime - mapSyncTime) / 10);
        syncTime = syncTime * 10;
        // console.log(syncTime); //, currentTime);
        midiUpdate(syncTime);
    }
    
    $.fn.addClassSVG = function(className){
        $(this).attr('class', function(index, existingClassNames) {
            return existingClassNames + ' ' + className;
        });
        return this;
    };

    $.fn.removeClassSVG = function(className){
        $(this).attr('class', function(index, existingClassNames) {
            //var re = new RegExp(className, 'g');
            //return existingClassNames.replace(re, '');
        });
        return this;
    };

//]]>
</script>

<!-- modal -->
<div class="modal fade" id="errorDialog" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="glyphicon glyphicon-remove"> </span></button>
                <h4 class="modal-title" id="myModalLabel">Error</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" role="alert">Sorry, Verovio failed to process the MEI data</div>
                <p>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#errDiv" aria-expanded="false" aria-controls="errDiv">Show the error log</button>
                </p>
                <div class="collapse" id="errDiv">
                    <pre id="err"></pre>
                </div>
            </div>
        </div>
    </div>
</div>
    
<!-- top navbar -->
<div id="navbar" class="navbar navbar-default navbar-with-sidebar">
    <button type="button" class="navbar-toggle sidebar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
    </button>
    <div class="btn-group">
          <audio id="audioPlayer" controls="controls">
            <source type="audio/mpeg" style="width:90%; height:10px;"/>
            Your browser does not support the HTML5 audio element.
          </audio>
    </div>
    
    <button type="button" id="mei_download" class="navbar-toggle menu-download" style="display: none;">
        <span class="glyphicon glyphicon-download"></span><span> MEI</span>
    </button>
    <a class="navbar-brand logo-nav" href="{{ site.baseurl }}/index.xhtml">
        <img alt="Verovio logo" src="{{ site.baseurl }}/images/verovio-fadded-50.png" />
    </a>
    <div style="clear: both;"></div>
    <hr/>
</div>

<div id="svg_panel" style="background-color: #fff;">
    <div id="player" style="z-index: 20; position: absolute; display: none;"></div>
    <div id="svg_output" style="overflow:hidden;" />
</div>


<!-- sidebar -->
<div class="sidebar-offcanvas" id="sidebar" role="navigation">
    <div class="sidebar-panel">
        <div class="row">
            <div class="col-xs-12">
                <h4>Navigation</h4>
            </div>
        </div>
        <div class="row sidebar-row">
            <div class="col-xs-12">
                <button class="btn btn-default btn-sm pull-left popover-btn" type="button" data-container="body" data-toggle="popover" data-placement="left" data-content="On mobile devices, you can swipe left or right to change page and tap or double tap to zoom-in or zoom-out. On desktops, you can use [ctrl+] left or right arrows and +/- keys.">
                    <span class="glyphicon glyphicon-question-sign"/>
                </button>
            </div>
        </div>
        <div class="row sidebar-row">
            <div class="col-md-12">
                <p>
                    Go to page [1-<span id="total_text">1</span>]:
                </p>
                <div class="input-group input-group-sm" style="width: 20px;">
                    <span class="input-group-btn">
                        <button onclick="first_page()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-fast-backward"/>
                        </button>
                        <button onclick="prev_page()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-backward"/>
                        </button>
                    </span>
                    <input type="text" class="form-control" placeholder="0" id="jump_text" style="width: 45px !important;" onkeypress="do_page_enter(event)"/>
                    <span class="input-group-btn">
                        <button onclick="next_page()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-forward"/>
                        </button>
                        <button onclick="last_page()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-fast-forward"/>
                        </button>
                    </span>
                </div>
                <p></p>
                <p><em>(Swipe or click left- or right-key to change screen)</em></p>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
        </div>
        <div class="row sidebar-row">
            <div class="col-md-6">
                <p>
                    Zoom:
                </p>
                <div class="input-group input-group-sm" style="width: 20px;">
                    <span class="input-group-btn">
                        <button onclick="zoom_out()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-zoom-out"/>
                        </button>
                    </span>
                    <input type="text" class="form-control" style="width:60px !important;" placeholder="100%" id="zoom_text" onkeypress="do_zoom_enter(event)"/>
                    <span class="input-group-btn">
                        <button onclick="zoom_in()" class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-zoom-in"/>
                        </button>
                    </span>
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-md-6 -->
        </div>
    </div>
    
    <div class="sidebar-panel">
        <div class="row">
            <div class="col-xs-12">
                <h4>Examples</h4>
            </div>
        </div>
        <div id="downloads_panel_body">
            <div class="row">
                <div class="col-md-12">
                    {% for d in page.downloads %}
                    <div {% if d.hidden == true %}class="hidden-sm hidden-xs"{% endif %}>
                        <p>
                        <a href="{{ site.baseurl }}/{{ page.name }}?file=examples/downloads/{{ d.link }}&amp;audio=examples/player/{{ d.audio }}">{{ d.name }}</a><br/>
                         {{ d.description }}
                        </p>
                    </div>
                    {% endfor %}
                </div>
                <!-- /.col-md-6 -->
            </div>
            <!-- /.row -->
        </div>
    </div>
    
    
    <div class="sidebar-panel">
        <p>This viewer uses the latest development version <a href="" id="version">[version]</a> and might be unstable.</p>
    </div>
    
</div>


<script type="text/javascript">
//<![CDATA[
    $( document ).ready(function() {
        
        var version = vrvToolkit.getVersion();
        var n = version.lastIndexOf('-');
        var commit = version.substring(n + 1);
        $('#version').text( version );
        $("#version").attr( "href", "http://github.com/rism-digital/verovio/commit/" + commit ) ; 
        
        $(window).keyup(function(event){
            // We need to make sure not to capture event on text fields
            if ( $(event.target).hasClass('form-control') ) {
                return;
            }
            if ( event.ctrlKey && (event.keyCode == 37) ) {
                first_page();
            }
            else if ( event.keyCode == 37 ) {
                prev_page();
            }
            else if ( event.ctrlKey && (event.keyCode == 39) ) {
                last_page();
            }
            else if ( event.keyCode == 39 ) {
                next_page();
            }
            else if ( event.keyCode == 107 ) {
                zoom_in();
            }
            else if ( event.keyCode == 109 ) {
                zoom_out();
            }
        });
        
        $(window).resize(function(){
            apply_zoom();
        });
        
        $( "#toggle_log" ).click(function() {
            log = !log;
            $( "#log_panel_body" ).toggle();
            // toggle icon
            $("span", this).toggleClass("glyphicon-chevron-down glyphicon-chevron-left");
        });

        $( "#mei_download" ).click(function() {
            outputFilename = outputFilename.replace(/\.[^\.]+$/, '.mei');
            saveAs(new Blob([vrvToolkit.getMEI(-1, true)], {type: "text/xml;charset=utf-8"}), outputFilename);
        });
        
        // Set the popover for the btn
        $( ".popover-btn" ).popover( );
        
        // Adjust the size of the svg_output and the zoom according to the div (screen) size
        width = $('#svg_panel').width();
        zoom = Math.min( Math.floor( 100 * width / 2100 ), zoom );
        //$("#svg_output").height( zoom * 30 ); // slighly more for making sure we have no scroll bar (3000 for default height of 2970)
        
        // Init the swipe
        enable_swipe( true );
    
        // Load the default file or the file passed in the URL
        var file = getParameterByName("file");
        var audio = getParameterByName("audio");
        
        if (!file || (file.length == 0)) {
            file = "examples/downloads/Chopin_Etude_op.10_no.9.mei";
            //audio = "examples/player/Guiomar_Novaes_Etude_Op_10_No_9_in_F_minor_Chopin";
            audio = "examples/player/IMSLP71472-PMLP01969-etude09";
        }
        //get JSON and assign response to var json and log data
        $.getJSON( audio + ".json", function(data){
            syncData = data; // console.log(data);
        }, 'json');
        $("#overlay").show();
        $.ajax({
            url: file
            , dataType: "text"
            , success: function(data) {
                outputFilename = file.replace(/^.*[\\\/]/, '')
                load_data( data );
            }
        });
        
        $("#audioPlayer").attr("src", audio + ".mp3");
        
        $("#audioPlayer").bind("timeupdate", onAudioUpdate);
        $("#audioPlayer").bind("play", function(){
            audioIndex = 0;
            audioClock = setInterval(function(){
                onAudioUpdate();
            }, 50);
        });
        $("#audioPlayer").bind("pause", function(){
            clearInterval(audioClock);
        });
        
    });
//]]>
</script>