Verovio Humdrum Viewer is a fairly complex frontend to the verovio javascript toolkit, but simpler interactions with verovio are easy to implement. Verovio is a music typesetting library written in C++ that converts Humdrum, MEI, MusicXML, or Plaine & Easie musical data into SVG notation images, either within a browser with the JavaScript toolkit implementation or in an operating system on the command-line. This section of the VHV documentation gives examples of how to use verovio on your own webpages or to generate graphical music notation for various purposes.
Command-line use
Verovio can be compiled for use in a unix-style terminal shell. Here is the basic verovio command to generate an SVG image from a Humdrum file:
verovio file.krn
This will create a file called file.svg with the graphical
music notation represented in the Humdrum file file.krn,
using the default settings.
Static server-generated images
There are several command-line options that can be used to control formatting of the generated SVG image. For the following example SVG image, these options were used:
verovio input.krn --adjust-page-height -h 2000 -w 1550 --spacing-staff 3 --spacing-system 3 -s 30
- –adjust-page-height
- shrink the height of the SVG image to the height of the printed music (remove any blank space below the music).
- -h 2000
- set the height of the SVG page to 2000 pixels.
- -w 1550
- set the width of the SVG page to 1550 pixels.
- –spacing-staff 3
- pad the bottom of each staff with 3 diatonic steps of additional space.
- –spacing-system 3
- pad the bottom of each system with 3 diatonic steps of additional space.
- -s 30
- scale the music to 30% of full size.
Additional options can be found on the verovio command-line page.
The resulting SVG image is shown on the right, with the input Humdrum data shown beside it:
**kern *clefF4 *k[b-e-a-] *M3/4 =1- (8GL 8E-) (8BBn 8CJ) 4AA- =2 (8cL 8A-) (8En 8FJ) 4BBn =3 (8dL 8A-) (8En 8FJ) (8GGL 8GJ) =4 (8FL 8E-) (8BBn 8CJ) 4CC =5 (8CL 8E- 8A-) (8G 8d-X 8cJ) =6 (8DL 8F 8B-) (8A- 8c 8B-J) =7 (8A-L 8G) (8D 8E-) (8BB- 8DJ) =8 2.EE- =9:|!|: (8B-L 8G) (8D 8E-J) 4DD-X =10 (8B-L 8G) (8En 8FJ) 4GG =11 (8d-XL 8B-) (8En 8FJ) 8CCL 8cJ =12 (8B-L 8A-) (8En 8FJ) 4FF =13 (8EE-L 8C 8F) (8E- 8B- 8AnJ) =14 (8DDL 8D 8G) (8F 8c 8BnJ) =15 (8cL 8A-) (8F#X 8G) 8BBn 8CJ =16 (8GGL 8D) (8G 8F#X) 8c 8BnJ =17 (8e-L 8c) (8F#X 8GJ) 8AAnL 8e-J =18 (8dL 8A-X) (8En 8FJ) 8BBnL 8GJ =19 (8FL 8E- 8BBn 8CJ) (8GGL 8BnJ) =20 (8CCL 8GG 8F 8E-J 4c) =:|! *- |
|
See the myVHV command-line page for more information about command-line use of verovio with Humdrum files.
JavaScript use
In addition to being able to run the converter on the command-line, verovio is also available as a javascript toolkit that allows you to generate SVG images directly within a webpage.
Static browser-generated images
The following Humdrum data is used to create the music notation on the right without the need to store the notation in a separately loaded image file:
**kern *clefF4 *k[b-e-a-] *M3/4 =1- (8GL 8E-) (8BBn 8CJ) 4AA- =2 (8cL 8A-) (8En 8FJ) 4BBn =3 (8dL 8A-) (8En 8FJ) (8GGL 8GJ) =4 (8FL 8E-) (8BBn 8CJ) 4CC =5 (8CL 8E- 8A-) (8G 8d-X 8cJ) =6 (8DL 8F 8B-) (8A- 8c 8B-J) =7 (8A-L 8G) (8D 8E-) (8BB- 8DJ) =8 2.EE- =9:|!|: (8B-L 8G) (8D 8E-J) 4DD-X =10 (8B-L 8G) (8En 8FJ) 4GG =11 (8d-XL 8B-) (8En 8FJ) 8CCL 8cJ =12 (8B-L 8A-) (8En 8FJ) 4FF =13 (8EE-L 8C 8F) (8E- 8B- 8AnJ) =14 (8DDL 8D 8G) (8F 8c 8BnJ) =15 (8cL 8A-) (8F#X 8G) 8BBn 8CJ =16 (8GGL 8D) (8G 8F#X) 8c 8BnJ =17 (8e-L 8c) (8F#X 8GJ) 8AAnL 8e-J =18 (8dL 8A-X) (8En 8FJ) 8BBnL 8GJ =19 (8FL 8E- 8BBn 8CJ) (8GGL 8BnJ) =20 (8CCL 8GG 8F 8E-J 4c) =:|! *- |
|
To learn how to generate static SVG images within a webpage, see this page.
Dynamic browser-generated images
Using verovio to create static images on webpages is fine, but not much different from generating the images on the command-line and loading as an image from the web server. Here is the same music as in the above example, but you can now edit the Humdrum data and the notation to the right will be updated immediately by re-converting the changed Humdrum data into a new SVG image.
Try changing the Humdrum data in the above example, such as removing
the key signature, changing to tenor clef (*clefC4), or changing
some pitches. The SVG image on the right should update as you
make changes.