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" }),

  // Четвертная пауза. С помощью поля keys: ["b/4"] мы указали её позицию  
  // по вертикали. Поэкспериментируйте ради прикола. 
  new VF.StaveNote({clef: "treble", keys: ["b/4"], duration: "qr" }),

  //  Большой мажорный септаккорд – Cmaj7
  new VF.StaveNote({clef: "treble", keys: ["c/4", "e/4", "g/4", "b/4"], duration: "q" })
];

// Создаем объект «Голос» с размером состоящим из четырёх долей, 
// каждая из которых по длительности равна четвертной ноте, 
// и помещаем в него нашу мелодию
var voice = new VF.Voice({num_beats: 4,  beat_value: 4});
voice.addTickables(notes);

// Равномерно выровняем все ноты и знаки
var formatter = new VF.Formatter().joinVoices([voice]).format([voice], 400);

// Отрисовываем (рендерим)
voice.draw(context, stave);