topic09.html

---
next_text: Applying SVG filters to elements
next_id: topic10
---
<h3>Playing the MIDI output</h3>

<p>
    Verovio can produce basic MIDI files and this feature is also available in the JavaScript toolkit. It can be used to play an MEI file directly in the browser as demonstrated in this example.
</p>

<p>
    The <code>renderToMidi</code> method of the toolkit returns a MIDI file encoded in base64. The file can be passed to a player. In this case, we use this <a href="https://github.com/rism-ch/midi-player/" target="_blank">JavaScript MIDI player</a>.
</p>

{% highlight javascript %}
////////////////////////////////////////////
/* A function that start playing the file */
////////////////////////////////////////////
function play_midi() {
    if (isPlaying == false) {
        var base64midi = vrvToolkit.renderToMIDI();
        var song = 'data:audio/midi;base64,' + base64midi;
        $("#player").show();
        $("#player").midiPlayer.play(song);
        isPlaying = true;
    }
}
{% endhighlight %}

<p>
   The player provides us with callback functions that allow note highlighting. Each time the <code>midiUpdate</code> function is called, we can move the next page (if necessary) and highlight the notes that are currently played. Notice that we also need to de-highlight the notes that are not played anymore by resetting their color to black.
</p>

{% highlight javascript %}
//////////////////////////////////////////////////////
/* Two callback functions passed to the MIDI player */
//////////////////////////////////////////////////////
var midiUpdate = function(time) {
    var vrvTime = Math.max(0, time - 400);
    var elementsattime = vrvToolkit.getElementsAtTime(vrvTime);
    if (elementsattime.page > 0) {
        if (elementsattime.page != page) {
            page = elementsattime.page;
            loadPage();
        }
        if ((elementsattime.notes.length > 0) && (ids != elementsattime.notes)) {
            ids.forEach(function(noteid) {
                if ($.inArray(noteid, elementsattime.notes) == -1) {
                    $("#" + noteid).attr("fill", "#000").attr("stroke", "#000"); 
                }
            });
            ids = elementsattime.notes;
            ids.forEach(function(noteid) {
                if ($.inArray(noteid, elementsattime.notes) != -1) {
                    $("#" + noteid).attr("fill", "#c00").attr("stroke", "#c00");; 
                }
            }); 
        }
    }
}

var midiStop = function() {
    ids.forEach(function(noteid) {
        $("#" + noteid).attr("fill", "#000").attr("stroke", "#000"); 
    });
    $("#player").hide();
    isPlaying = false;
}
{% endhighlight %}

<p>
   Oppositely, it is also possible to click on a note for jumping in the piece.
</p>

{% highlight javascript %}
////////////////////////////////////////
/* Bind a on click event to each note */
////////////////////////////////////////
$(".note").click(function() {
    var id = $(this).attr("id");
    var time = vrvToolkit.getTimeForElement(id);
    $("#player").midiPlayer.seek(time);
});
{% endhighlight %}

{% include html-tutorial.html id="code1" file="topic09-midi.html" %}
<div id="code1-xml" style="display: none">
{% highlight html %}
{% include_relative gh-tutorial/topic09-midi.html %}
{% endhighlight %}
</div>

<div class="pull-right">
    <p><a href="./tutorial.xhtml?id={{ page.next_id }}">{{ page.next_text }}</a> →</p>
</div>