mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
5ebf3ddd96
update vexflow version number in comment Co-authored-by: sschmid <s.schmid@phonicscore.com>
111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
var canvas = document.getElementById('canvas');
|
|
var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
|
|
var ctx = renderer.getContext();
|
|
|
|
// Add a treble clef and time signature
|
|
var stave = new Vex.Flow.Stave(10, 0, 550);
|
|
stave.setContext(ctx).addClef('treble').addKeySignature('A').addTimeSignature('4/4');
|
|
|
|
// Dotted eighth E##, sixteenth Eb, half D, quarter Cm#5
|
|
var notes1 = [
|
|
new Vex.Flow.StaveNote({ keys: ['e##/5'], duration: '8d' })
|
|
.addAccidental(0, new Vex.Flow.Accidental('##'))
|
|
.addDotToAll(),
|
|
new Vex.Flow.StaveNote({ keys: ['eb/5'], duration: '16' }).addAccidental(0, new Vex.Flow.Accidental('b')),
|
|
new Vex.Flow.StaveNote({ keys: ['d/5'], duration: 'h' }),
|
|
new Vex.Flow.StaveNote({ keys: ['c/5', 'eb/5', 'g#/5'], duration: 'q' })
|
|
.addAccidental(1, new Vex.Flow.Accidental('b'))
|
|
.addAccidental(2, new Vex.Flow.Accidental('#')),
|
|
];
|
|
|
|
// Create a beam for the first two notes
|
|
var beam = new Vex.Flow.Beam(notes1.slice(0, 2));
|
|
|
|
// Add a grace note to the half D
|
|
var gracenote = new Vex.Flow.GraceNote({ keys: ['e/5'], duration: '16', slash: true });
|
|
notes1[2].addModifier(0, new Vex.Flow.GraceNoteGroup([gracenote], true).beamNotes());
|
|
|
|
// Color the chord
|
|
notes1[3].setStyle({ fillStyle: 'blue', strokeStyle: 'blue' });
|
|
|
|
// Add a bar
|
|
var tickable1: Vex.Flow.Note[] = notes1;
|
|
tickable1.push(new Vex.Flow.BarNote());
|
|
|
|
// Create a voice in 4/4 and add notes
|
|
var voice1 = new Vex.Flow.Voice({
|
|
num_beats: 4,
|
|
beat_value: 4,
|
|
resolution: Vex.Flow.RESOLUTION,
|
|
}).addTickables(tickable1);
|
|
|
|
// Create a second voice with just one whole note
|
|
var voice2 = new Vex.Flow.Voice(Vex.Flow.TIME4_4).addTickables([
|
|
new Vex.Flow.StaveNote({ keys: ['c/4'], duration: 'w' }),
|
|
new Vex.Flow.BarNote(),
|
|
]);
|
|
|
|
// Format and justify the notes to 550 pixels
|
|
var formatter = new Vex.Flow.Formatter({softmaxFactor: null, maxIterations: 2})
|
|
.joinVoices([voice1, voice2]).format([voice1, voice2], 550);
|
|
|
|
// Render stave
|
|
stave.draw();
|
|
|
|
// Render voices
|
|
voice1.draw(ctx, stave);
|
|
voice2.draw(ctx, stave);
|
|
|
|
// Render beam
|
|
beam.setContext(ctx).draw();
|
|
|
|
// Create and draw a tablature stave
|
|
var tabstave = new Vex.Flow.TabStave(10, 200, 550);
|
|
tabstave.addTabGlyph();
|
|
tabstave.setContext(ctx).draw();
|
|
|
|
// Create some TabNotes
|
|
var notes = [
|
|
// A single note
|
|
new Vex.Flow.TabNote({
|
|
positions: [{ str: 3, fret: 7 }],
|
|
duration: 'q',
|
|
}),
|
|
|
|
// A chord with the note on the 3rd string bent
|
|
new Vex.Flow.TabNote({
|
|
positions: [
|
|
{ str: 2, fret: 10 },
|
|
{ str: 3, fret: 9 },
|
|
],
|
|
duration: 'q',
|
|
}).addModifier(new Vex.Flow.Bend('Full'), 1),
|
|
|
|
// A single note with a harsh vibrato
|
|
new Vex.Flow.TabNote({
|
|
positions: [{ str: 2, fret: 5 }],
|
|
duration: 'h',
|
|
}).addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0),
|
|
];
|
|
|
|
// Format ad draw the notes
|
|
Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);
|
|
|
|
/*
|
|
* Use Flow.Factory and Easy Score to draw notes
|
|
*/
|
|
const vf = new Vex.Flow.Factory({ renderer });
|
|
const score = vf.EasyScore();
|
|
const system = vf.System();
|
|
|
|
system
|
|
.addStave({
|
|
voices: [score.voice(score.notes('C4/q, D4, E4, F4', { stem: 'up' }), {})],
|
|
})
|
|
.addClef('treble')
|
|
.addTimeSignature('4/4');
|
|
|
|
system.addConnector();
|
|
|
|
vf.draw();
|