Get started with vexflow CDN
MIT licensed
VexFlow is a library for creating interactive music notation and sheet music visualizations.
Tags:- music
- notation
- guitar
- tablature
Stable version
Copied!
How to start using vexflow CDN
// Include VexFlow library
const Vex = document.createElement('script');
Vex.src = 'https://cdn.cdnhub.io/vexflow/4.2.3/vexflow-min.js';
document.head.appendChild(Vex);
// Wait for VexFlow to load
Vex.onload = () => {
// Create a new FlowContainer
const container = new Vex.Flow.FlowContainer('container', { width: 600 });
// Create a new Stave with 88 keys (A0 to C8)
const stave = new Vex.Flow.Stave('stave', 0, 480, 600);
container.addStave(stave);
// Set the stave spacing and add a clef
stave.setSpacing(30);
stave.addClef('treble', 0);
// Create an array of notes for the piano keys
const notes = ['C4', 'C#4', 'D4', 'D#4', 'E4', 'F4', 'F#4', 'G4', 'G#4', 'A4', 'A#4', 'B4', 'C5', 'C#5', 'D5', 'D#5', 'E5', 'F5', 'F#5', 'G5', 'G#5', 'A5', 'A#5', 'B5', 'C6', 'C#6', 'D6', 'D#6', 'E6', 'F6', 'F#6', 'G6', 'G#6', 'A6', 'A#6', 'B6', 'C7', 'C#7', 'D7', 'D#7', 'E7', 'F7', 'F#7', 'G7', 'G#7', 'A7', 'A#7', 'B7', 'C8'];
// Create a new note for each piano key and add it to the stave
for (let i = 0; i < notes.length; i++) {
const note = new Vex.Flow.Note({ keys: [notes[i]], duration: 0.5 });
const y = 200 - (i / 8) * 30;
stave.addTickable(new Vex.Flow.GraceNote(note, new Vex.Flow.Tie(note, new Vex.Flow.Note({ keys: [notes[i + 1]], duration: 0.5 }))).setPositionName('head').setY(y);
}
// Render the FlowContainer
container.render();
};
Copied!
Copied!
Copied!
Copied!
All versions
1.2.0
1.2.1
1.2.10
1.2.11
1.2.12
1.2.13
1.2.14
1.2.15
1.2.16
1.2.17
1.2.18
1.2.19
1.2.2
1.2.20
1.2.21
1.2.22
1.2.23
1.2.24
1.2.25
1.2.26
1.2.27
1.2.28
1.2.29
1.2.3
1.2.30
1.2.31
1.2.32
1.2.33
1.2.36
1.2.38
1.2.39
1.2.4
1.2.40
1.2.41
1.2.43
1.2.44
1.2.45
1.2.46
1.2.47
1.2.48
1.2.49
1.2.5
1.2.50
1.2.51
1.2.52
1.2.53
1.2.54
1.2.55
1.2.56
1.2.57
1.2.58
1.2.59
1.2.6
1.2.60
1.2.61
1.2.62
1.2.63
1.2.64
1.2.65
1.2.66
1.2.69
1.2.70
1.2.71
1.2.72
1.2.73
1.2.74
1.2.75
1.2.76
1.2.77
1.2.78
1.2.79
1.2.8
1.2.80
1.2.81
1.2.82
1.2.83
1.2.84
1.2.85
1.2.87
1.2.88
1.2.89
1.2.9
1.2.90
1.2.91
1.2.93
3.0.1
3.0.3
3.0.4
3.0.5
3.0.6
3.0.7
3.0.8
3.0.9
4.0.0
4.0.1
4.0.1-alpha.0
4.0.1-alpha.1
4.0.1-alpha.2
4.0.1-beta.0
4.0.1-beta.1
4.0.1-beta.2
4.0.1-rc.0
4.0.2
4.0.3
4.1.0
4.1.0-alpha.0
4.1.0-beta.0
4.1.0-rc.0
4.2.0
4.2.0-alpha.0
4.2.0-beta.0
4.2.0-beta.1
4.2.0-beta.2
4.2.0-beta.3
4.2.0-rc.0
4.2.1
4.2.2
4.2.3
4.2.4
*** 4.2.5
5.0.0-alpha.1
5.0.0-alpha.2
5.0.0-alpha.3
5.0.0-alpha.4