humdrum-js

A Javascript parser for musical data in the Humdrum syntax

This page demonstrates how to mix humdrum-js with the humdrum-notation-plugin library to download J.S. Bach chorales from this Github repository and dynamically generate notation based on the option settings from the following menus. View the page’s source code to see how the typesetter is implemented.

SVG
Keyboard shortcuts

• Arrow keys navigate through the chorale list.
• Keys 1–7 transpose tonic from C–B.
• Digit 0 returns choral to original pitch.



Dynamically typeset examples

The black boxes below contain HTML code for a dynamic music example using the Humdrum notation plugin: 

<html>
<head>
<title>My Example</title>
<script src="https://verovio-script.humdrum.org/scripts/verovio-toolkit.js"></script>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin.js"></script>
<script>var vrvToolkit = new verovio.toolkit()</script>
</head>
<body>
<div style="width:590px">











</div>
</body>
</html>

Copy & paste the above HTML text into your own webpage. Copy the text in all three black boxes to create a new webpage, or copy only the middle box's contents if you already have the Humdrum notation plugin setup in your page and want to add another example. The width of the music notation on this page is 590 pixels, so when placing in a containing element that is 590 pixels, the layout will match the one for the music on this page. Adjust the following slider to change the target width for the HTML example:

Editing the music

If you want to make a change to the music that is not available in the typesetting menu (such as correcting a note, or cutting off the music in the middle of a measure), then you can load the music into Verovio Humdrum Viewer (see the documentation for editing details. Also, here is a link to the compiled version of the data filters, which may be easier to edit since it only contains the music that you see on the left, not the entire chorale of a range of measures is selected. You can also listen to the music by pressing the space bar or the play button in the upper right corner of the VHV editor window.

Title Tonic Octave Staves
Measures: to Musical spacing:
Title:  Size: