Verovio tutorial 00

Getting started

by lpugin

HTML

<html>

  <head>
    <title>Verovio Hello World! example</title>
    <!--/////////////////////-->
    <!-- The Verovio toolkit -->
    <!--/////////////////////-->
    <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>
    <!--//////////////////////////////////////////////-->
    <!-- The div where we are going to insert the SVG -->
    <!--//////////////////////////////////////////////-->
    <div id="svg_output" />

  </body>

</html>

JavaScript

$(document).ready(function(e) {
  ///////////////////////////
  /* Create the vrvToolkit */
  ///////////////////////////
  var vrvToolkit = new verovio.toolkit();

  // The file we want to load
  var file = "https://www.verovio.org/gh-tutorial/mei/Beethoven_StringQuartet_op.18_no.2.mei"

  ////////////////////////////////////
  /* Load the file using a HTTP GET */
  ////////////////////////////////////
  $.ajax({
    url: file,
    dataType: "text",
    success: function(data) {
      // TODO : render 'data' into a svg variable using the renderData method
      var svg = vrvToolkit.renderData(data, {});
      $("#svg_output").html(svg);
    }
  });
});