Data

MEI code can be passed to the viewer either as an XMLDocument or as a string.

Music notation in a JavaScript string, embedded in an HTML page

Here's an example of an MEI string defined in a <script> element which gets rendered by the viewer to a <div> element:

The code:

<div style="text-align:center">
    <span id="music" style="display:inline-table"></span>
</div>

<script>
$(document).ready(function () {
    var meiCode =
        '<mdiv xmlns="http://www.music-encoding.org/ns/mei">' + 
            '<score>' +
                '<scoreDef page.width="300" page.height="80" page.topmar="20">' +
                    '<staffGrp>' +
                        '<staffDef n="1" lines="5" clef.line="2" clef.shape="G" ' +
                        'meter.count="4" meter.unit="4" key.pname="E" key.mode="major"/> ' +
                    '</staffGrp>' + 
                '</scoreDef>' + 
                '<section>' + 
                    '<measure n="1">' + 
                        '<staff n="1">' +
                            '<layer>' + 
                                '<note pname="e" oct="4" dur="1"/>' +
                            '</layer>' + 
                        '</staff>' + 
                    '</measure>' +
                '</section>' + 
            '</score>' +
        '</mdiv>';

    var viewer = new MSV.Viewer({
      data   : meiCode,
      target : $('#music')
    });

});
</script>

AJAX request

If your MEI code is stored in a separate XML document (or your web server is configured in a way it generates XML responses), you can load the MEI code with an AJAX request. The following example is generated by loading the file xml/ajax.xml with jQuery's get function, which passes an XMLDocument to the callback function:

HTML / JavaScript:

<div style="text-align:center">
    <span id="music1" style="display:inline-table"></span>
</div>

<script>
$.get('/meisnippetviewer/xml/ajax.xml', function (meiCode) {
    var viewer = new MSV.Viewer({
          data   : meiCode, 
          target : $('#music1')
        });
}, 'xml');
</script>

xml/ajax.xml:

<mdiv xmlns="http://www.music-encoding.org/ns/mei">
<score>
    <scoreDef page.width="300" page.height="80" page.topmar="20">
        <staffGrp>
            <staffDef n="1" lines="5" clef.line="2" clef.shape="G"
            meter.count="4" meter.unit="4" key.pname="E" key.mode="major"/>
            </staffGrp>
        </scoreDef>
    <section>
        <measure n="1">
            <staff n="1">
                <layer>
                    <note pname="e" oct="4" dur="1"/>
                    </layer>
                </staff>
            </measure>
        </section>
    </score>
</mdiv>