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({ keys: ["d/4", "f/4", "a/4", "c/5"], 
duration: "h" }).
      addAccidental(1, new VF.Accidental("#")).
      addAccidental(2, new VF.Accidental("#")).
      addAccidental(3, new VF.Accidental("#")),
    new VF.StaveNote({ keys: ["d/4", "f/4", "a/4", "c/5"], 
duration: "h" }).
      addAccidental(1, new VF.Accidental("n")).
      addAccidental(2, new VF.Accidental("b")).
      addAccidental(3, new VF.Accidental("b")),
  ];

VF.Formatter.FormatAndDraw(context, stave, notes);