Using EasyScore

Sam Bender edited this page Nov 7, 2017 · 14 revisions

What is EasyScore?

EasyScore is a tiny language that you can use to generate all the VexFlow elements necessary for a sequence of musical notation. The 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 [ jsfiddle ]

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 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 notated 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 [ jsfiddle ]

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 provided the stem option to score.notes to explicitly specify the direction of the stem for each voice.

Multiple Voices on Multiple Staves [ jsfiddle ]

Now, lets 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 had to specify the clef for the EasyScore notes. We also added a StaveConnector that rendered along all the staves in the system. All the voices across all the staves are properly formatted, justified, and aligned.

Beams and Tuplets [ jsfiddle ]

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

Append /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.. which 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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.