How to render a soundtrack in VexFlow? - vexflow

Question

Using Tone.js and I can play this melody:
const textMeasures = ['rest/4 B4/16 A4/16 G#4/16 A4/16',
'C5/8 rest/8 D5/16 C5/16 B4/16 C5/16',
'E5/8 rest/8 F5/16 E5/16 D#5/16 E5/16',
'B5/16 A5/16 G#5/16 A5/16 B5/16 A5/16 G#5/16 A5/16',
'C6/4 A5/8 C6/8',
'B5/8 A5/8 G5/8 A5/8',
'B5/8 A5/8 G5/8 A5/8',
'B5/8 A5/8 G5/8 F#5/8',
'E5/4'];
Now, I'd like to use VexFlow to render these notes on some staves.
Keeping in mind, the display should be fine on a mobile device, and that there could be multiple voices on the soundtrack.
For now I created a method to have a stave per measure:
private renderSoundtrackVexflow(name: string, soundtrack: Soundtrack) {
const context = this.renderVexflowContext(name, VEXFLOW_WIDTH, VEXFLOW_HEIGHT);
context.setFont('Arial', 10, '').setBackgroundFillStyle('#eed'); // TODO Hard coded values
if (soundtrack.hasTracks()) {
let staveIndex: number = 0;
const voices: Array<vexflow.Flow.Voice> = new Array<vexflow.Flow.Voice>();
for (const track of soundtrack.tracks) {
if (track.hasMeasures()) {
for (const measure of track.measures) {
if (measure.hasNotes()) {
const stave = new this.VF.Stave(0, staveIndex * (VEXFLOW_STAVE_HEIGHT + VEXFLOW_STAVE_MARGIN), VEXFLOW_WIDTH);
staveIndex++;
stave.setContext(context);
stave.addClef(VEXFLOW_CLEF);
stave.addTimeSignature(this.renderTimeSignature(measure));
stave.draw();
const notes = new Array<vexflow.Flow.StaveNote>();
const voice = new this.VF.Voice();
voice.setStrict(false);
voice.setContext(context);
voice.setStave(stave);
for (const placedNote of measure.placedNotes) {
const note: Note = placedNote.note;
notes.push(new this.VF.StaveNote({ keys: [ this.renderAbc(note) ], duration: this.renderDuration(note) }));
}
voice.addTickables(notes);
voices.push(voice);
}
}
const formatter = new this.VF.Formatter();
formatter.joinVoices(voices).format(voices, VEXFLOW_WIDTH);
for (const voice of voices) {
voice.draw();
console.log('Min voice width: ' + formatter.getMinTotalWidth(voice));
}
}
}
}
}
But the notes are displayed a bit on the staves, but some notes are displayed in between staves, on the page.

Answer 1

The question is a bit old, but in case you still need a solution...
The problem is that all notes have their stems oriented upwards. To fix this, add auto_stem: true and clef: "treble" to the option list passed to VF.StaveNote(), see VexFlow: Stem Direction for more information. Here is the corrected line that creates notes:
notes.push(new this.VF.StaveNote({
keys: [ this.renderAbc(note) ],
duration: this.renderDuration(note),
auto_stem: true,
clef: "treble"
}));