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>

$(document).ready(function () {
    var meiCode =
        '<mdiv xmlns="">' + 
            '<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>' +

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


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>

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


<mdiv xmlns="">
    <scoreDef page.width="300" page.height="80" page.topmar="20">
            <staffDef n="1" lines="5" clef.line="2" clef.shape="G"
            meter.count="4" meter.unit="4" key.pname="E" key.mode="major"/>
        <measure n="1">
            <staff n="1">
                    <note pname="e" oct="4" dur="1"/>