Simple annotation/text example

[GHSoCoder]

A first hello,

and many thanks for all your efforts!

I'm testing VexFlow/EasyScore and looking for an simple example (EasyScore
preferred), just one bar with:

• clef treble
• just a quarter note, no time signature
• annotation/text above/below the note

My aim is the genertion of labels for the keys of my (music) keyboard
with note name and MIDI numbers.

[Prospero23]

Code would probably look something like this (this is with including vexflow as a script over CDN):

` const { Factory, System } = Vex.Flow;

const vf = new Factory({
renderer: { elementId: 'output', width: 500, height: 200 },
});

let score = vf.EasyScore()
const system = vf.System();

// creates a quarter note
let notes = score.notes("Bb4/q")

// add text above/below note
notes[0].addModifier(vf.Annotation({text: "Bb4", vJustify: Vex.AnnotationVerticalJustify.TOP}))
notes[0].addModifier(vf.Annotation({text: "MIDI: 70", vJustify: Vex.AnnotationVerticalJustify.BOTTOM}))

system
.addStave({
voices: [
score.voice(notes, {time: '1/4'}),
]
})
.addClef('treble')

vf.draw();
`

All you need in the html is a div with the id="output"
Hope this helps!

[GHSoCoder]

Many thanks Prospero23,

but I get an "TypeError: Vex.AnnotationVerticalJustify is undefined" error!?