Simple use of the verovio javascript toolkit to display Humdrum data as graphical notation on a stand-alone webpage with a tiny bit of javascript.

Example

The following box contains an indepndent webpage showing a musical example. This notation was generated directly within the webpage rather than being loaded as a separate image file from the server. This is accomplished in the same manner as music notation is generated on the Verovio Humdrum Viewer website: Humdrum data is stored inside the webpage and is converted by the verovio javascript toolkit program into an SVG image.


view stand-alone demo page directly

The HTML text for the page is shown in the next section along with a commentary of the JavaScript code used to do the conversion and place the SVG image on the page.

Here is the Humdrum data which is stored inside of the sample page:

**kern	**kern
*clefF4	*clefG2
*k[f#]	*k[f#]
*M4/4	*M4/4
=-	=-
8GL	8ddL
8AJ	8ccJ
16BLL	2.b;
16A	.
16G	.
16F#JJ	.
2G;	.
==	==
*-	*-

If you need to change the graphic notation on the page, all you have to do is edit the Humdrum file text on the page, reload the page, and the music notation will automatically be updated. As an exercise, copy the contents of the page further below and try changing the Humdrum text to:

**kern	**kern
*clefF4	*clefG2
*k[f#]	*k[f#]
*M4/4	*M4/4
=-	=-
8GL	8ddL
8AJ	8cc@J
16BLL	2.b;
16AN	.
16GN	.
16F#JJ	.
2G;	.
==	==
*-	*-
!!!RDF**kern: @ = marked note
!!!RDF**kern: N = marked note color=green

Here is the resulting notation, created on this page from the above data:

Also you can even edit the Humdrum data immediately above the music to change colors or mark notes to change their color in this notation example (more about how this is done in the next section).

Source code

To implement the static image example, copy and paste the following text into an HTML file, and then view the page in a web browser.

<html>
<head>
<title>SimpleViewer</title>
<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit.js">
</script>
</head>
<body>

Here is a short musical example:

<script id="input" type="text/humdrum"> 
**kern	**kern
*clefF4	*clefG2
*k[f#]	*k[f#]
*M4/4	*M4/4
=-	=-
8GL	8ddL
8AJ	8ccJ
16BLL	2.b;
16A	.
16G	.
16F#JJ	.
2G;	.
==	==
*-	*-
</script>

<div id="output"></div>

<script>
	var vrvToolkit = new verovio.toolkit();
	var Input = document.querySelector("#input");
	var Output = document.querySelector("#output");
	document.addEventListener("DOMContentLoaded", displayNotation);

	function displayNotation() {
		if (!vrvToolkit) {
			return;
		}
		var data = Input.textContent;
		var options = {
			inputFormat: "humdrum",
			adjustPageHeight: 1,
			pageHeight: 1000,
			pageWidth:  1000,
			scale:  40,
			font: "Leipzig"
		};

		var svg = vrvToolkit.renderData(data, options);
		Output.innerHTML = svg;
	}
</script>

</body>
</html>

Code commentary

This section gives a detailed description of how the webpage works.

Loading and initializing verovio

Line 4 loads the JavaScript toolkit version of verovio:

<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit.js"></script>

The script is loaded from https://verovio-script.humdrum.org, where the most recent version of the Humdrum-aware verovio script is hosted. Alternatively you can download that script and store it locally on your website, or compile directly from the verovio source (compile from the develop-humdrum branch for the latest Humdrum-aware version).

Next, on line 31 the verovio toolkit interface is initialized and stored in the vrvToolkit variable:

   var vrvToolkit = new verovio.toolkit();

Humdrum data

The Humdrum file is stored on lines 11–26 in a script element having the ID input:

<script id="input" type="text/humdrum"> 
**kern	**kern
*clefF4	*clefG2
*k[f#]	*k[f#]
*M4/4	*M4/4
=-	=-
8GL	8ddL
8AJ	8ccJ
16BLL	2.b;
16A	.
16G	.
16F#JJ	.
2G;	.
==	==
*-	*-
</script>

Extracting Humdrum data from page

The ID for the script could be any text, as long as the ID matches the ID reference on line 32:

	var Input = document.querySelector("#input");

In this case the Humdurm data is hidden since it is stored in a <script> element, but any element, such as a div could be used to store the Humdrum data visibly on the page.

The Humdrum file contents is extracted from the storage element on line 37 using textContent:

	var data = Input.textContent;

Options

Options for the verovio toolkit can be found on the page verovio.org/command-line.xhtml. These options are for the command line, so when using in JSON data for the JavaScript version of the verovio toolkit, change spaces into capitalization. For example --page-height becomes pageHeight.

The adjustPageHeight can be used to keep all music in a single image by setting the pageHeight to a very large value. If adjustPageHeight is enabled, verovio will shrink the SVG image to remove blank space at the bottom of the page. Setting adjustPageHeight to 0 or not explicitly setting the option will produce a fixed-height image, possibly with a blank region after the music is finished.

The verovio typesetting engine contains three possible fonts to choose from: Leipzig, Bravura and Granville.

Generating the SVG image

Line 46 contains the code that converts the Humdrum data into an SVG image:

      var svg = vrvToolkit.renderData(data, options);

The vrvToolkit.renderData() function takes two parameters: (1) the musical data, and (2) a javascript object containing the rendering options. The output from renderData is an SVG image.
This image is then placed on the webpage at line 47:

		Output.innerHTML = svg;