Humdrum Verovio Script

Javascript for viewing Humdrum digital scores online.

View the Project on GitHub

Basic javascript use

This page demonstrates a simple method of loading the verovio script, then displaying two static scores. The source code for a complete webpage containing the same examples is given further below.

Twinkle, Twinkle, Little Star

Mary Had a Little Lamb

Example code

Here is example HTML content to display the above notation. Try copying the text in the black region below into a file ending in .htm or .html and open it in your web brower (probably by double clicking on the file).

<html>
<head>
<title>Basic usage</title>
<script src="http://verovio-script.humdrum.org/scripts/verovio-toolkit-wasm.js"></script>
</head>
<body>

<h2> Twinkle, Twinkle, Little Star </h2>
<div style="padding-bottom:30px" id="notation-twinkle"></div>

<h2> Mary Had a Little Lamb</h2>
<div id="notation-mary"></div>

<script id="humdrum-twinkle" type="text/x-humdrum">
**kern
*clefG2
*M4/4
=1
4c
4c
4g
4g
=2
4a
4a
2g
=3
4f
4f
4e
4e
=4
4d
4d
2c;
==
*-
</script>

<script id="humdrum-mary" type="text/x-humdrum">
**kern
*clefG2
*M4/4
=1
4e
4d
4c
4d
=2
4e
4e
2e
=3
4d
4d
2d
=4
4e
4g
2g
=
*-
</script>

<script>

document.addEventListener("DOMContentLoaded", (event) => {
   Module.onRuntimeInitialized = async _ => {
      let tk = new verovio.toolkit();

      let humdrumTwinkle = document.querySelector("#humdrum-twinkle").textContent.replace(/^\s+/, "");
      let verovioOptions = {
         scale:           40,
         pageWidth:     1500,
         pageHeight:   60000,
         pageMarginTop:    0,
         adjustPageHeight: 1
      };
      let svgTwinkle = tk.renderData(humdrumTwinkle, verovioOptions);
      let elementTwinkle = document.querySelector("#notation-twinkle");
      elementTwinkle.innerHTML = svgTwinkle;

      let humdrumMary = document.querySelector("#humdrum-mary").textContent.replace(/^\s+/, "");
      verovioOptions.scale     = 60;
      verovioOptions.pageWidth = 1000;
      let svgMary = tk.renderData(humdrumMary, verovioOptions);
      let elementMary = document.querySelector("#notation-mary");
      elementMary.innerHTML = svgMary;

   }
});

</script>

</body>
</html>

Notes