VexFlow Sandbox

ChordSymbol

by ronyeh

HTML

<script src="https://unpkg.com/[email protected]/build/cjs/vexflow-debug.js"></script>
<div id="output"></div>

JavaScript

const {
  Renderer,
  Stave,
  StaveNote,
  Formatter,
  Accidental,
  ChordSymbol,
  SymbolModifiers
} = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById("output");
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();
context.scale(1.5, 1.5);
context.setFont("Arial", 10);

// Create a stave of width 400 at position 10, 40 on the canvas.
let stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef("treble").addTimeSignature("4/4");

// Connect it to the rendering context and draw!
stave.setContext(context).draw();

let notes = [
  // A quarter-note C.
  new StaveNote({
    keys: ["f/4"],
    duration: "h",
  }),

  // A quarter-note D.
  new StaveNote({
    keys: ["b/4"],
    duration: "h",
  }).addModifier(new Accidental("b")),
];
let chord1 = new ChordSymbol()
  .setFontSize(14)
  .addText("B")
  .addGlyph("b")
  .addText("7", {
    symbolModifier: SymbolModifiers.SUPERSCRIPT,
  })
  .addGlyph("(", {
    symbolModifier: SymbolModifiers.SUPERSCRIPT,
  })
  .addGlyph("b", {
    symbolModifier: SymbolModifiers.SUPERSCRIPT,
  })
  .addText("5", {
    symbolModifier: SymbolModifiers.SUPERSCRIPT,
  })
  .addGlyph(")", {
    symbolModifier: SymbolModifiers.SUPERSCRIPT,
  });

let chord2 = new ChordSymbol().setFontSize(10).addGlyphOrText("Bb").addGlyphOrText("7(b5)", {
  symbolModifier: SymbolModifiers.SUPERSCRIPT,
});
notes[0].addModifier(chord1);
notes[1].addModifier(chord2);

Formatter.FormatAndDraw(context, stave, notes);

// Change the music font to Petaluma.
// ChordSymbol will choose a different text font to visually match with the music engraving font.
// https://github.com/0xfe/vexflow/blob/46af63bb5eb52c66d3a30d978b3a08d04eecf5c6/src/chordsymbol.ts#L376-L380

Vex.Flow.setMusicFont("Petaluma");

stave = new Stave(10, 120, 400);

// Add a clef and time...