Using EasyScore

What is EasyScore?

EasyScore is the fastest way to get started with VexFlow. You can use it to generate all the basic VexFlow elements necessary for a sequence of musical notation, and extend them with the standard VexFlow API. The EasyScore language supports notes, accidentals, beams, dots, tuplets, and other common notational elements.

Here's an example of an EasyScore line representing a C major chord (quarter note) followed by four eighth notes: (C4 E4 G4)/q, D4/8, E4, F4, G4.

Let's Go!

A Few Notes on a Stave [ example ]

Below, we use Factory, System, and EasyScore to render four notes on a treble stave.

// Create an SVG renderer and attach it to the DIV element named "boo".
var vf = new Vex.Flow.Factory({renderer: {elementId: 'boo'}});
var score = vf.EasyScore();
var system = vf.System();

The factory is constructed with a DIV selector, and takes care of initializing the rendering context. All elements generated by the factory will be connected to this context by default. Notice that we use the factory to generate the EasyScore and System instances, too.

system.addStave({
  voices: [score.voice(score.notes('C#5/q, B4, A4, G#4'))]
}).addClef('treble').addTimeSignature('4/4');

vf.draw();

We then construct a System and provide it a voice generated by score. The addStave call creates a new stave and renders voices onto the stave. The voice is constructed with score.voice(...), which uses notes constructed from score.notes(...), which takes an EasyScore string.

EasyScore lets you quickly write out a musical sequence and generates the appropriate VexFlow elements for you. In the string C#5/q, B4, A4, G#4 we have four notes separated by commas. They're all quarter notes (as indicated by the /q, which cascades to following notes) on octaves 5 and 4. There are also two # accidentals generated by this score.

The addStave(..) call returns a normal Vex.Flow.Stave instance, on which the addClef() and addTimeSignature() methods were called above.

The final call to the factory, vf.draw(), formats and renders all elements generated by the factory (which, here, is everything.)

Two Voices [ example ]

Below we add another voice with two half notes to the stave.

system.addStave({
  voices: [
    score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
    score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
  ]
}).addClef('treble').addTimeSignature('4/4');

Above, we provide the stem option to score.notes to explicitly specify the direction of the stem for each voice.

Multiple Voices on Multiple Staves [ example ]

Now let's add another stave which renders two more voices.

system.addStave({
  voices: [
    score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
    score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
  ]
}).addClef('treble').addTimeSignature('4/4');

system.addStave({
  voices: [
    score.voice(score.notes('C#3/q, B2, A2/8, B2, C#3, D3', {clef: 'bass', stem: 'up'})),
    score.voice(score.notes('C#2/h, C#2', {clef: 'bass', stem: 'down'}))
  ]
}).addClef('bass').addTimeSignature('4/4');

system.addConnector()

Notice that we have to specify the clef for the EasyScore notes. We also add a StaveConnector that renders across all the staves in the system. All the voices across all the staves are properly formatted, justified, and aligned.

Beams and Tuplets [ example ]

To add a beam or a tuplet, simply wrap the notes in EasyScore.beam() or EasyScore.tuplet() and concatenate it to your existing notes.

system.addStave({
  voices: [
    score.voice(
      score.notes('C#5/q, B4')
        .concat(score.beam(score.notes('A4/8, E4, C4, D4')))
    )
  ]
}).addClef('treble').addTimeSignature('4/4');

The code above starts with two quarter notes followed by four eighth notes under a beam.

system.addStave({
  voices: [
    score.voice(
      score.notes('C#5/q, B4, B4')
        .concat(
          score.tuplet(score.beam(score.notes('A4/8, E4, C4'))))
    )
  ]
}).addClef('treble').addTimeSignature('4/4');

And here we wrap a beam in a tuplet to render eighth-note triplets.

Other EasyScore Features

Rests

Appending /r to the note, e.g. B4/8/r, will render an 8th note rest on the staff line for B4

Dotted Notes

To create a dotted note, simply append one or more periods to the note, e.g. A5/q.. renders a quarter note with two dots.

Chords

To create a chord, simply place multiple notes in between parenthesis, e.g. (C4 E4 G4)/q, A5 renders a C-major chord followed by an A note.

Note Options

You set key=value attributes on notes by placing the key/value pairs within brackets after the note, e.g. A5[stem="up",id="foobar"] will set the ID of this note to foobar and render it with an upwards stem.