How to set up a system with notation and tab in Vexflow?
279 views
Skip to first unread message
j z
Apr 23, 2021, 12:34:24 PM4/23/21
to vexflow
Hi all,
I'm using Vextab for a project, and it's fantastic. Unfortunately, it doesn't support a few things I need, and the vextab would get really hairy anyway, so I'd like to try Vexflow. For the life of me I can't sort out how to make a simple system of notation and tab. Below is what I've tried and the errors I've received.
If/when I get this sorted out, I'll add it to the vexflow wiki as a "Recipe" or similar.
Cheers! jz
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://unpkg.com/vexflow/releases/vexflow-debug.js"></script>
</head>
<body>
<p>Hello</p>
<div id="boo"></div>
</body>
<script>
const VF = Vex.Flow
// Create an SVG renderer and attach it to the DIV element named "boo".
var vf = new VF.Factory({renderer: {elementId: 'boo', height: 700}})
var score = vf.EasyScore()
var system = vf.System()
system.addStave({
voices: [
score.voice(score.notes('C#5/w', {stem: 'up'}))
]
}).addClef('treble').addTimeSignature('4/4')
var tabstave = new VF.TabStave()
var tabnote = new VF.TabNote({ positions: [ {str: 3, fret: 7} ], duration: "w" })
tabnote.setStave(tabstave)
// this causes "tickable.shouldIgnoreTicks is not a function"
/*
system.addStave({
stave: tabstave,
voices: score.voice([ [ tabnote ] ])
}).addClef('treble').addTimeSignature('4/4')
*/
// this causes "voice.setContext is not a function"
/*
system.addStave({
stave: tabstave,
voices: [ [ tabnote ] ]
}).addClef('treble').addTimeSignature('4/4')
*/
// causes {code: "BadArgument", message: "No voices to format"}
/*
system.addStave({
stave: tabstave
})
*/
// causes Error: <path> attribute d: Expected number, "MNaN 65MNaN 64.91…".
/*
var voice = new VF.Voice('4/4')
voice.addTickables([ tabnote ])
system.addStave({
stave: tabstave,
voices: [ voice ]
}).addClef('treble').addTimeSignature('4/4')
*/
system.addConnector()
vf.draw()
</script>
</html>
Reply all
Reply to author
Forward
0 new messages