Home

Awesome

Verovio Humdrum Viewer (VHV)

VHV is an online Humdrum file notation renderer that uses the verovio typesetting engine.

In the text box on the VHV homepage type some Humdrum data, and it will be converted immediately into music notation on the right. The homepage includes some sample data you can play with:

Try editing (or copy/paste) the following text into the text box on the homepage to match:

**kern
*M4/4
*clefG2
=1-
8cL
8dJ
2e;
4c
==
*-

Loading files from your Desktop

You can drag and drop Humdrum files from your desktop onto the page and the data content will be loaded into the text box and rendered into notation automatically.

Files cannot be saved from the webpage yet, but you can copy/paste the text box content into a plain-text editor (with line-wrap turned off).

Loading online content

The VHV website can access data from kernScores, so you can also view online content. For example, here is a Bach chorale:

http://verovio.humdrum.org/?file=chorales/chor001.krn

Notice that you can pull the bottom right corner of the text box to see more columns of the Humdrum data.

Also, if you view a repertory directly, it will show this listing:

http://verovio.humdrum.org/?file=chorales

Here is a listing of Mozart piano sonatas:

http://verovio.humdrum.org/?file=mozart/sonatas

When a Humdrum file has an associated source edition scan, pressing the "p" key (or alt-p when editing in the text box) will open up a window containing a PDF scan of the original notation used to encode the Humdrum data:

Pressing the "s" key (or "alt-s" when editing in the text box) will open up a window with the contents of the SVG image for the notation page currently being displayed (which you can then copy and save to a file for use on the web or a modern word processor):

Here is a listing of Beethoven piano sonatas:

http://verovio.humdrum.org/?file=beethoven/sonatas

And here is a view of the entire first movement of the moonlight sonata (created by zooming-out in the web browser):

Extracting examples from online data

You can also select a ranges of measures from a complete work, such as the start of the second theme in the recapitulation section of the first movement of the appassionata (mm 190-197):

A few URL-embedded options can be passed to the viewer, such as "k=h" which will hide the Humdrum text box initially: http://verovio.humdrum.org/?file=beethoven/sonatas/sonata26-3.krn&k=h

You can submit feature requests for the Verovio Humdrum Viewer (VHV) on this page:

 https://github.com/humdrum-tools/verovio-humdrum-viewer/issues

The Bach chorale repertory should be behaving nicely without bugs, but occasional problems in Mozart and Beethoven sonatas that need to be fixed). Most notation rendering bugs should be reported directly to verovio:

https://github.com/rism-ch/verovio/issues

Build your own HVH website:

The VHV Demos website provides example implementations of the Humdrum-enabled Verovio Toolkit for you to build your own pages or websites using similar functionality to VHV. Here are a few simple examples to get started. You can also look at the source code for VHV: https://github.com/humdrum-tools/verovio-humdrum-viewer/tree/gh-pages

Minimal editor

Here is a minimal webpage which demonstrates embedding a verovio-humdrum editor into your own webpage:

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

<table>
<tr>
<td>
<textarea id="input">
**kern
*clefG2
*M4/4
=1-
1c;
==
*-
</textarea>
</td>
<td>
<div id="output"></div>
</td>
</tr>
</table>

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

   function displayNotation() {
      var data = Input.value;
      var options = {
         inputFormat: "auto",
         adjustPageHeight: 1,
         pageHeight: 60000,
         pageWidth:  2500,
         scale:  40,    
         font: "Leipzig"
      };        

      var svg = vrvToolkit.renderData(data, JSON.stringify(options));
      Output.innerHTML = svg;
   }    

</script>

<style>
textarea {
   width: 200px;
   height: 400px;
}
<style>

</body>
</html>

Example view of the webpage:

Static image created in the browser.

Or even easier, here is an example of a static image created from Humdrum content embedded inside of the webpage:

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

<script id="input" type="text/humdrum"> 
**kern
*clefF4
*k[f#]
*M4/4
8GL
8AJ
16BLL
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");
        var Page = 1;
        document.addEventListener("DOMContentLoaded", displayNotation);

        function displayNotation() {
                var data = Input.textContent.replace(/^\s+/, "");
                var options = {
                        inputFormat: "auto",
                        adjustPageHeight: 1,
                        pageHeight: 1000,
                        pageWidth:  1000,
                        scale:  40,
                        font: "Leipzig"
                };

                var svg = vrvToolkit.renderData(data, JSON.stringify(options));
                Output.innerHTML = svg;
        }

</script>

</body>
</html>

View of the static notation example page: