JSFiddle - React, Tailwind, and code Playground

by lpugin

HTML

<html>
    <head>
        <title>Verovio example with options</title>
        <script src="https://www.verovio.org/javascript/develop/verovio-toolkit.js" type="text/javascript" ></script>
        <!-- We also use jQuery -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" ></script>
    </head>
    <body style="margin: 0px;">
        <!-- The div where we are going to insert the SVG -->
        <div id="svg_output"/>
    </body>
</html>

JavaScript

///////////////////////////
            /* Some global variables */
            ///////////////////////////
            var vrvToolkit = new verovio.toolkit();
            
            /***************************************************************/
            // TODO: set a zoom variable with a percent value (e.g., 50)
            /***************************************************************/
            
            var pageHeight = 2970;
            var pageWidth = 2100;

            ///////////////////////////////////////////////////
            /* A function for setting options to the toolkit */
            ///////////////////////////////////////////////////
            function setOptions() {
                //////////////////////////////////////////////////////////////
                /* Adjust the height and width according to the window size */
                //////////////////////////////////////////////////////////////
                pageHeight = $(document).height() * 100 / zoom ;
                pageWidth = $(window).width() * 100 / zoom ;
                options = {
                            pageHeight: pageHeight,
                            pageWidth: pageWidth,
                            scale: zoom,
                            adjustPageHeight: true
                        };
                vrvToolkit.setOptions(options);
            }

           	//////////////////////////////////////////
            /* A function that sets the options, loads 
            the data and render the first page */
            //////////////////////////////////////////
            function loadData(data) {
                setOptions();
                vrvToolkit.loadData(data);
                svg = vrvToolkit.renderToSVG(1, {});
                $("#svg_output").html(svg);
            }

            $(document).ready(function() {
                var file = "https://www.verovio.org/gh-tutorial/mei/Beethoven_StringQuartet_op.18_no.2.mei";
               ...