jQuery VexFlow¶ ↑

This is a simple library that uses VexFlow and the dependency vexflow-json to render staff notation.

There are two primary ways to use this:

Setting Data In-Line:¶ ↑

<div id="my-chord" />

$("#my-chord").vexflow({
  clef: "treble",
  notes: [
    { duration: "q", keys: ["C", "Eb", "G", "Bb"] },
    { duration: "q", keys: ["C", "Eb", "F", "A"] },
    { duration: "h", keys: ["Bb", "D", "F', "A"] }
  ]
});

Setting Data on Element’s Attribute:¶ ↑

<div class="staff" data-clef="treble" data-staff='["C", "E", "G", "Bb"]' />

$(".staff").vexflow();

Dimensions¶ ↑

By default jquery-vexflow will determine width and height of the element, either by “width”/“height” or “data-width”/“data-height” attributes:

<div class="staff" data-clef="treble" data-staff='["C", "E", "G", "Bb"]' data-width="400" data-height="150" />

$(".staff").vexflow();

Alternately, the vexflow method accepts an optional second argument with render options (width and height) which will force width/height:

$("#my-chord").vexflow(["C", "E", "G"], { width: 400, height: 150 });

Scaling¶ ↑

You can change the scale of the rendering with the data-scale attribute:

<div class="staff" data-clef="treble" data-staff='["C", "E", "G", "Bb"]' data-scale="0.75" />

$(".staff").vexflow();

Or specify it as an optional second argument with render options:

$("#my-chord").vexflow(["C", "E", "G"], { scale: 0.75 });

Clef(s)¶ ↑

By default jquery-vexflow will determine the clef to use using the “data-clef” attribute. This can be set to a single value of “treble” or “bass”, or alternatively the “treble,bass” string which will render both clefs. Be sure that the height is set appropriately if rendering both clefs.

<div class="staff" data-clef="treble" data-staff='["C/3", "E/3", "G/4", "Bb/4"]' data-clef="treble,bass" data-height="180" />

$(".staff").vexflow();

Rendering Options¶ ↑

jQuery VexFlow will take an optional second argument which is expected to be an object with rendering options. Typically this is unnecessary if you set the appropriate attributes on the element as specified above, but this could be used either instead or to override the element values:

$("#my-chord").vexflow(["C/3", "E/3", "G/4", "Bb/4"], { clef: ["treble", "bass"], width: 300, height: 180 });