Basic rendering

At the end of part 1, we finished with a page that was successfully loading the Verovio library, but with nothing to display. In this part of the tutorial We will write some JavaScript that will fetch an MEI file from a URL, and then pass that MEI file to Verovio. This will turn the MEI file into an Scalable Vector Graphics (SVG) file that we can then embed in our page.

Fetching MEI with JavaScript

The first step is to fetch an MEI file from a URL. To do this, you can write the following in your HTML file, immediately after the console.log statement:

fetch("https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei")
  .then( (response) => response.text() )
  .then( (meiXML) => {
    let svg = tk.renderData(meiXML, {});
    document.getElementById("notation").innerHTML = svg;
  });

To break this down a bit, we start with a fetch statement with a URL; this tells your browser to try and load the file available at this address from a remote server. If it’s successful, then it should extract the XML data from the server: then( (response) => response.text() ).

Finally, we take this MEI response and pass it off to our Verovio instance. Remember that we ‘started’ Verovio by creating a new Toolkit and assigning it to the variable tk? Well, now we are using this toolkit to render the MEI file. The result, as you might guess by the variable name (let svg = ...), will be some SVG.

Once we have this SVG, we look through the page for HTML element with the id of “notation”. You should see a <div id="notation"></div> line already in your HTML file. We set the content of this element (the innerHTML) to the SVG output of Verovio.

If you refresh your HTML page now, you should see a rendered version of a Schubert lied, “Der Lindenbaum”. Congratulations! If you do not see this, go back and double-check that you do not have any errors in your browser console.

End of Section 2

At the end of this section, you should have a page with some rendered music notation on it. It’s probably a bit too big, though, to read comfortably on your screen. You may also be wondering how Verovio handles larger scores, with lots of pages. We will answer these two questions in the next sections by looking at how we can control the layout options, and how we can use JavaScript to navigate the score dynamically.

Full example

<html>
  <head>
    <script src="https://www.verovio.org/javascript/latest/verovio-toolkit-wasm.js" defer></script>
    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
          verovio.module.onRuntimeInitialized = async _ => {
            let tk = new verovio.toolkit();
            console.log("Verovio has loaded!");

            fetch("https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei")
              .then( (response) => response.text() )
              .then( (meiXML) => {
                let svg = tk.renderData(meiXML, {});
                document.getElementById("notation").innerHTML = svg;
              });
          }
      });
    </script>
  </head>
  <body>
    <h1>Hello Verovio!</h1>
    <div id="notation"></div>
  </body>
</html>