How to add chord symbols above notes, in loop?

157 views

Skip to first unread message

Robert Wildling

unread,

Mar 31, 2020, 5:15:06 PM3/31/20

to vexflow

Hi!

In the app I try to build, it is possible to choose a root not (via a keyboard) and then a chord symbol to generate the chord.

In the next step, related chords are generated (super and sub sets of the chosen chord). The generated chords should all get their respective chord symbol / chord text (sth like "maj7") get assigned.

To do that I tried this:

      // SUPER SETS
      if (superSetsLength > 0) {
        vexSuperSetsArr.forEach(set => {
          // Create a notes / "tone" (= one note or many notes, like a chord, in one moment)
          const currRelatedChord = new VF.StaveNote({
            clef: store.state.clefDef.clefType,
            keys: set.vexNotes,
            duration: 'w'
          })
           .addAnnotation(0, new VF.Annotation('Whole measure rest').setPosition(1))

          // Add accidentals
          set.vexAccidentals.map((accid, index) => {
            if (accid === '') { return false }
            return currRelatedChord.addAccidental(index, new VF.Accidental(accid))
          })

          superSetsStaveNotes.push(currRelatedChord)
        })
      }

The "JUST A TEST TEXT" is generated over the first (related) chord, but it is too low, the high notes overlap the text.

Is there a way to place the text relative to the top or bottom note of the chord?

Also, is there anywhere some material / tutorial that showcases how to use more text elements with VexFlow, like Tempo text, Instrument texts, dynamics, Lyrics...