VexFlow Sandbox

ChordSymbol

by ronyeh

HTML

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

CSS

div svg {
	border: 1px solid #999;
}

JavaScript

// This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag).
const { Stave, StaveNote, Beam, Formatter, Renderer } = Vex;

// In an ESM context (or when using TypeScript), you will need to use the "import" keyword.
// import { Stave, StaveNote, Beam, Formatter, Renderer } from 'vexflow';

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

// Configure the rendering context.
renderer.resize(720, 130);
const context = renderer.getContext();


// Measure 1
const staveMeasure1 = new Stave(10, 0, 300);
staveMeasure1.addClef('treble').setContext(context).draw();

const notesMeasure1 = [
  new StaveNote({ keys: ['c/4'], duration: 'q' }),
  new StaveNote({ keys: ['d/4'], duration: 'q' }),
  new StaveNote({ keys: ['b/4'], duration: 'qr' }),
  new StaveNote({ keys: ['c/4', 'e/4', 'g/4'], duration: 'q' }),
];

// Helper function to justify and draw a 4/4 voice
Formatter.FormatAndDraw(context, staveMeasure1, notesMeasure1);

// Measure 2 - second measure is placed adjacent to first measure.
const staveMeasure2 = new Stave(staveMeasure1.width + staveMeasure1.x, 0, 400);

const notesMeasure2_part1 = [
  new StaveNote({ keys: ['c/4'], duration: '8' }),
  new StaveNote({ keys: ['d/4'], duration: '8' }),
  new StaveNote({ keys: ['b/4'], duration: '8' }),
  new StaveNote({ keys: ['c/4', 'e/4', 'g/4'], duration: '8' }),
];

const notesMeasure2_part2 = [
  new StaveNote({ keys: ['c/4'], duration: '8' }),
  new StaveNote({ keys: ['d/4'], duration: '8' }),
  new StaveNote({ keys: ['b/4'], duration: '8' }),
  new StaveNote({ keys: ['c/4', 'e/4', 'g/4'], duration: '8' }),
];

// Create the beams for 8th notes in second measure.
const beam1 = new Beam(notesMeasure2_part1);
const beam2 = new Beam(notesMeasure2_part2);

const notesMeasure2 =...