StaveNote Reference Error #1402

dstrummer · 2022-06-04T17:05:39Z

dstrummer
Jun 4, 2022

Hello,

Thank you for offering this wonderful set of tools - I look forward to using it! I am trying to run the Vexflow tutorial code but my browser does not recognize StaveNote. It draws the basic staff beautifully but when it gets to step 2 I see: "Uncaught ReferenceError: StaveNote is not defined." I included the "output" div element and the vexflow script tag at the beginning of my code. It's probably a minor error on my part but I appreciate you taking a look at my code.

` // Create SVG foundation
const { Renderer, Stave } = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element "output."
	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();
	
// Create a staff of width 400 at position 10, 40 on the canvas.
	const stave = new Stave(10, 40, 400);
	
// Add a clef and time signature
	stave.addClef("treble").addTimeSignature("4/4");
	
// Connect it to the rendering object and draw!
	stave.setContext(context).draw();

// Create the notes
	const notes = [
// A quarter-note C.
	new StaveNote ({ keys: ["c/4"], duration: "q" }),

// A quarter-note D.
	new StaveNote ({ keys: ["d/4"], duration: "q" }),

// A quarter-note rest. Note that the key (b/4) specifies the vertical
// position of the rest.
	new StaveNote ({ keys: ["b/4"], duration: "qr" }),

// A C-Major chord.
	new StaveNote ({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),
];

// Create a voice in 4/4 and add above notes
const voice = new Voice({ num_beats: 4, beat_value: 4 });
voice.addTickables(notes);

// Format and justify the notes to 400 pixels.
new Formatter().joinVoices([voice]).format([voice], 350);

// Render voice
voice.draw(context, stave);`

Thanks, dstrummer