Previous topic

music21.vexflow.indent

Next topic

music21.voiceLeading

Table Of Contents

Table Of Contents

This Page

music21.vexflow.toMusic21j

Convert a music21 object into JSON and send it to the browser for music21j to use.

Functions

music21.vexflow.toMusic21j.fromObject(thisObject, mode='html')

returns a string of data for a given Music21Object such as a Score, Note, etc. that can be displayed in a browser using the music21j package. Called by .show(‘vexflow’).

>>> n = note.Note('C#4')
>>> print(vexflow.toMusic21j.fromObject(n))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- for MSIE 10 on Windows 8 -->
    <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
    <title>Music21 Fragment</title>
    <script data-main='http://web.mit.edu/music21/music21j/src/music21' src='http://web.mit.edu/music21/music21j/ext/require/require.js'></script>
    <script>
        require(['music21'], function() {
            var pickleIn = '{"m21Version": {"py/tuple": [1, 9, 2]}, "stream": {"_mutable": true, "_activeSite": null, "xPosition": null, "' + 
'_priority": 0, "_elements": [], "_cache": {}, "definesExplicitPageBreaks": false, "_unlinkedDuration": null, "' + 
'id": ..., "_duration": null, "py/object": "music21.stream.Stream", "streamStatus": {"py/object": "music' + 
'21.stream.streamStatus.StreamStatus", "_enharmonics": null, "_dirty": null, "_concertPitch": null, "_accidenta' + 
'ls": null, "_ties": null, "_rests": null, "_ornaments": null, "_client": null, "_beams": null, "_measures": nu' + 
...
'd": null}, "definesExplicitSystemBreaks": false, "_idLastDeepCopyOf": ...}}';
            var jpc = new music21.jsonPickle.Converter();
            streamObj = jpc.run(pickleIn);
            streamObj.renderOptions.events.resize = "reflow";
            streamObj.appendNewCanvas();
        });
    </script>

</head>
<body>
</body>
</html>

VexflowPickler

class music21.vexflow.toMusic21j.VexflowPickler

VexflowPickler methods

VexflowPickler.fromObject(thisObject, mode=None)
VexflowPickler.fromStream(thisStream, mode=None)
VexflowPickler.getHTML(dataSplit, title=None, defaults=None)

Get the complete HTML page to pass to the browser:

>>> vfp = vexflow.toMusic21j.VexflowPickler()
>>> print(vfp.getHTML('{"hi": "hello"}', 'myPiece'))
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- for MSIE 10 on Windows 8 -->
    <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
    <title>myPiece</title>
    <script data-main='http://web.mit.edu/music21/music21j/src/music21' src='http://web.mit.edu/music21/music21j/ext/require/require.js'></script>
    <script>
    require(['music21'], function() {
                    var pickleIn = {"hi": "hello"};
                    var jpc = new music21.jsonPickle.Converter();
                    streamObj = jpc.run(pickleIn);
                    streamObj.renderOptions.events.resize = "reflow";
                streamObj.appendNewCanvas();
                });
    </script>
    </head>
    <body>
    </body>
    </html>
VexflowPickler.getJSBody(dataSplit, defaults=None)

Get the javascript code without the <script> tags to render the JSON

>>> vfp = vexflow.toMusic21j.VexflowPickler()
>>> print(vfp.getJSBody('{"hi": "hello"}'))
        require(['music21'], function() {
            var pickleIn = {"hi": "hello"};
            var jpc = new music21.jsonPickle.Converter();
            streamObj = jpc.run(pickleIn);
            streamObj.renderOptions.events.resize = "reflow";
        streamObj.appendNewCanvas();
        });
VexflowPickler.getJSBodyScript(dataSplit, defaults=None)

Get the <script>...</script> tag to render the JSON

>>> vfp = vexflow.toMusic21j.VexflowPickler()
>>> print(vfp.getJSBodyScript('{"hi": "hello"}'))
   <script>
        require(['music21'], function() {
            var pickleIn = {"hi": "hello"};
            var jpc = new music21.jsonPickle.Converter();
            streamObj = jpc.run(pickleIn);
            streamObj.renderOptions.events.resize = "reflow";
        streamObj.appendNewCanvas();
        });
    </script>        
VexflowPickler.getLoadTemplate(urls=None)

Gets the <script> tag for loading music21 from require.js

>>> vfp = vexflow.toMusic21j.VexflowPickler()
>>> vfp.getLoadTemplate()
"<script data-main='http://web.mit.edu/music21/music21j/src/music21' src='http://web.mit.edu/music21/music21j/ext/require/require.js'></script>"
>>> d = {'m21URI': 'file:///tmp/music21', 'requireURI': 'http://requirejs.com/require.js'}
>>> vfp.getLoadTemplate(d)
"<script data-main='file:///tmp/music21' src='http://requirejs.com/require.js'></script>"
VexflowPickler.splitLongJSON(jsonString, chunkSize=110)