JSFiddle - React, Tailwind, and code Playground

by Melnikov_Sergey

HTML

<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<div id="music-notebook"></div>

JavaScript

VF = Vex.Flow;

var element = document.getElementById("music-notebook");
var renderer = new VF.Renderer(element, VF.Renderer.Backends.SVG);

renderer.resize(500, 200);

var context = renderer.getContext();

var stave = new VF.Stave(10, 50, 400);

stave.addClef("treble").addTimeSignature("4/4");

stave.setContext(context).draw();

var notes = [
  new VF.StaveNote({clef: "treble", keys: ["c/4"], duration: "q" }),
  new VF.StaveNote({clef: "treble", keys: ["d/4"], duration: "q" }),
  new VF.StaveNote({clef: "treble", keys: ["b/4"], duration: "qr" }),
  new VF.StaveNote({clef: "treble", keys: ["c/4", "e/4", "g/4", "b/4"], duration: "q" })
];

var notes2 = [
  new VF.StaveNote({clef: "treble", keys: ["f/3"], duration: "w" })
];

var voices = [
	new VF.Voice({num_beats: 4,  beat_value: 4}).addTickables(notes),
	new VF.Voice({num_beats: 4,  beat_value: 4}).addTickables(notes2)]

var formatter = new VF.Formatter().joinVoices(voices).format(voices, 400);
voices.forEach(function(v) { v.draw(context, stave); })