javascript.xhtml

---
layout: verovio
verovio-light: true
title: Verovio – JS Toolkit
active: how
how-active: how-js
methods:
  - ["bool edit(editorAction)", "Experimental method for editing the loaded data. Returns true on success and false otherwise."]

  - ["object getElementsAtTime(millisec)", "Returns a JSON object with all the notes that are being played as a certain time. This can be called only if <code>renderToMidi</code> has been called previously."]

  - ["object getElementAttr(xmlId)", "Returns a JSON object with all the attributes for the element with the corresponding xmlId."]

  - ["string getLog()", "Returns the log message of the last performed operation, for example after having called <code>loadData</code>."]

  - ["string getMEI(page, scoreBased)", "Returns the MEI data loaded in the toolkit. If a page number is provide (i.e. > 0), then only that page is exported. In score-based MEI, then only the <code>section</code> element will be output. Set scoreBased to 1 for standard score-based MEI and 0 for the internal page-based MEI."]

  - ["int getPageCount()", "Returns the number of pages. This can be called once the data has been loaded with <code>loadData</code>. Page numbering is 1-based."]

  - ["int getPageWithElement(xmlId)", "Returns the page (i.e., the screen) where the element with the passed xmlId currently is. The will change according to the page height and with when the layout is performed by the toolkit."]

  - ["int getTimeForElement(xmlId)", "Returns the time in millisecond at which a note is being played. This can be called only if <code>renderToMidi</code> has been called previously"]

  - ["string getVersion()", "Returns the version of the toolkit (version number and git commit)."]

  - ["void loadData(data)", "Loads the data passed as a parameter. The data is a string of the music encoding (e.g., the MEI encoding). The method also performs the layout if necessary or if requested. It does not render the data, this can be accomplished subsequently by calling <code>renderPage</code>. The data stays in memory until new data is loaded or until the toolkit instance is deleted."]

  - ["void redoLayout()", "Redo the layout of the entire file. This has to be called for example when the size of the page (i.e., the screen) has changed."]

  - ["string renderData(data, options)", "Loads and the data with the options passed as JSON object and renders the first page. This methods is a shortcut for <code>loadData</code> and then <code>renderPage</code> and is appropriate for rendering small data snippets. The data does stay in memory once loaded. Also, up to version 0.9.12, the JSON object had to be stringified."]

  - ["string renderPage(pageNumber, options)", "Renders a page for the data loaded in the toolkit and returns it in SVG. The page numbering is 1-based. Options for rendering can be passed as JSON objects. The options affecting the layout (e.g., <code>pageHeight</code>, or <code>ignoreLayout</code>) cannot be modified when rendering a page and reloading the data if necessary for this. Also, up to version 0.9.12, the JSON object had to be stringified."]

  - ["string renderToMidi(options)", "Renders a page to a base64 encoded MIDI file. There is currently not option to be passed to this method."]

  - ["void setOptions(options)", "Sets the options as JSON for the toolkit instance. Up to version 0.9.12, the JSON object had to be stringified."]
---

<div class="row">
    <div class="col-md-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="panel panel-default">
            {% include how-sidebar.html %}
        </div>
    </div>

    <div class="col-md-9">
        <div class="panel-body">
            <h3>JavaScript toolkit</h3>
            <p>
                Verovio can be compiled to JavaScript using the <a href="http://www.emscripten.org" target="_blank">Emscripten</a> LLVM-to-JavaScript compiler. In this case, it behaves similarly to the command-line tool but in the web-browser. The SVG output of Verovio can be directly fed to HTML objects for display. This approach is particularly interesting because it makes Verovio an in-browser music Plaine and Easie or MEI typesetter. The <a href="{{ site.baseurl }}/mei-viewer.xhtml">MEI Viewer</a> illustrates its possible use.
            </p>

            <h4>Basic usage</h4>

            <p>
                The JavaScript version of Verovio is available as a toolkit that makes it very easy to integrate.
            </p>
            {% highlight html %}<script src="http://www.verovio.org/javascript/latest/verovio-toolkit.js"></script>{% endhighlight %}
            <p>
                Once included, and with jQuery, it is easy to load an MEI file and to render it on the fly:
            </p>
{% highlight html %}
<div id="output"/>
<script type="text/javascript">
    var vrvToolkit = new verovio.toolkit();
    /* Load the file using HTTP GET */
    $.get( "examples/hello-world/Haydn_StringQuartet_Op1_No1-p1.mei", function( data ) {
        var svg = vrvToolkit.renderData(data, {});
        $("#output").html(svg);
    }, 'text');
</script>
{% endhighlight %}

            <p>
                <a href="{{ site.baseurl }}/hello-mei-world.html" target="_blank">
                    <button type="button" class="btn btn-default btn-sm">
                      <span class="glyphicon glyphicon-eye-open"></span>  See it in action
                    </button>
                </a>
            </p>

            <p>
                See the  <a href="{{ site.baseurl }}/tutorial.xhtml">tutorial</a> for additional information about the integration of the JavaScript toolkit in web environments.
            </p>

            <h4>Options</h4>
            <p>
                All the options of the <a href="{{ site.baseurl }}/command-line.xhtml">command-line</a> version are supported, with the only difference that their name is in <code>camelCase</code> instead of <code>dash-case</code>. Only the <code>--all-pages</code> option is not supported. The options are passed to the Verovio toolkit in JSON.
            </p>
{% highlight javascript %}
options = {
    pageHeight: 2100,
    pageWidth: 4200,
    ignoreLayout: 1,
    border: 100,
    scale: 50
};
{% endhighlight %}

            <h4>Methods</h4>
            <p>
                In addition to the constructor and destructor, the Verovio JavaScript toolkit provides a certain number of methods for manipulating the data.
            </p>

            {% for method in page.methods %}
            <div class="panel panel-default">
                <div class="panel-heading panel-option"><code>{{ method[0] }}</code></div>
                    <div class="panel-body panel-option">
                        {{ method[1] }}
                    </div>
            </div>
            {% endfor %}

            <h4>Compatibility</h4>
            <p>
                The Verovio JavaScript toolkit has been tested with recent versions of the most widely used web-browsers. Internet Explorer requires at least version 10.
            </p>
            <div class="row text-center">
                <div class="col-sm-12" style="padding-bottom: 10px;">
                    <img src="{{ site.baseurl }}/images/browsers/chrome.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/firefox.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/opera.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/safari.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/ie.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/maxthon.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/android.png" width="48"/>
                    <img src="{{ site.baseurl }}/images/browsers/dolphin.png" width="48"/>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
//<![CDATA[
    $( document ).ready(function() {

    });
//]]>
</script>