Search code examples
javascriptvexflow

How to display a dotted musical note?

How to display a dotted note with vexflow. For example dans le code suivant : new Vex.Flow.StaveNote({keys: ["c/4"], duration: "qd" } the "d" is taken into account in the duration of the note but is not displayed in the scope

Version vexFlow : 4.2.2 src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js">

Solution

  • It's a bit strange, but you have to first set in the constructor to make internal changes in StaveNote:

    const note = new Vex.Flow.StaveNote({keys: ["c/4"], duration: "q", dots: 1 }

    And after you have to add a modifier to display the dot like this:

    const indexOfKey = 0;
note.addModifier(new Dot(), indexOfKey)

    Or like this:

    Dot.buildAndAttach([note], {all: true});

    {all: true} in this case means that the dots will be displayed in all the keys with your StaveNote has multiple keys