topic08.html

---
next_text: Playing the MIDI output
next_id: topic09
---

<h3>Applying an XSLT</h3>

<p>
   In some cases, it might be necessary to pre-process the MEI file before passing it to Verovio. In this example, we show how XSLT can be applied to an MEI using <a href="http://www.saxonica.com/ce/index.xml" target="_blank">Saxon-CE</a>. This means that the transformation happen in the browser and supports XSTL 2.0.
</p>

<p>
    In this example, we use a small XSL stylesheet that extract only one voice. The voice to be extracted is passed as parameter to the stylesheet. Then, the output for the transformation is passed to the <code>loadData</code> method.
</p>


{% highlight javascript %}
////////////////////////////////////////////////////////
/* A function that applies the XSLT and load the data */
////////////////////////////////////////////////////////
function loadFile() {
    var file = "mei/Beethoven_StringQuartet_op.18_no.2.mei";
    var xsl = Saxon.requestXML("xslt/stripStaff.xsl");
    var xml = Saxon.requestXML(file);
    var proc = Saxon.newXSLT20Processor(xsl);
    proc.setParameter(null, "voice", voice);
    loadData(Saxon.serializeXML(proc.transformToDocument(xml)));
}
{% endhighlight %}

<p>
    In this case, the voice selection is made through key 1, 2, 3, 4 for the violin 1, 2, the alto or the cello respectively.
</p>

{% highlight javascript %}
/////////////////////////
/* Selecting the voice */
/////////////////////////
if ((event.keyCode > 48) &&  (event.keyCode < 59)) {
    voice = event.keyCode - 48;
    //console.log(voice);
    loadFile();
}
{% endhighlight %}

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

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