-
Notifications
You must be signed in to change notification settings - Fork 662
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add JSFiddle examples from the wiki.
They are easier to maintain in the repository. If updates are required, just copy and paste the source into the target JSFiddle.
- Loading branch information
Showing
3 changed files
with
205 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!DOCTYPE > | ||
<!-- | ||
This example is available at: https://jsfiddle.net/cwnsrep9/ | ||
It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial | ||
--> | ||
<html> | ||
<style> | ||
body { | ||
font-family: Arial, 'sans-serif'; | ||
} | ||
</style> | ||
<body> | ||
<!-- | ||
On JSFiddle.net, we pin the dependency to an exact version number, | ||
to prevent a future release from accidentally breaking the example. | ||
--> | ||
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> | ||
<script> | ||
const { Renderer, Stave } = Vex.Flow; | ||
|
||
// Create an SVG renderer and attach it to the DIV element named "boo". | ||
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 stave 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 context and draw! | ||
stave.setContext(context).draw(); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
<!DOCTYPE > | ||
<!-- | ||
This example is available at: https://jsfiddle.net/c36p8eo2/ | ||
It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial | ||
--> | ||
<html> | ||
<style> | ||
body { | ||
font-family: Arial, 'sans-serif'; | ||
} | ||
</style> | ||
<body> | ||
<!-- | ||
On JSFiddle.net, we pin the dependency to an exact version number, | ||
to prevent a future release from accidentally breaking the example. | ||
--> | ||
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> | ||
<script> | ||
const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow; | ||
|
||
// Create an SVG renderer and attach it to the DIV element named "boo". | ||
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 stave 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 context 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); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
<!DOCTYPE > | ||
<!-- | ||
This example is available at: https://jsfiddle.net/awe4vdms/ | ||
It is included in the VexFlow Tutorial: https://github.com/0xfe/vexflow/wiki/Tutorial | ||
--> | ||
<html> | ||
<style> | ||
body { | ||
font-family: Arial, 'sans-serif'; | ||
} | ||
</style> | ||
<body> | ||
<!-- | ||
On JSFiddle.net, we pin the dependency to an exact version number, | ||
to prevent a future release from accidentally breaking the example. | ||
--> | ||
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> | ||
<script> | ||
const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow; | ||
|
||
// Create an SVG renderer and attach it to the DIV element named "boo". | ||
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 stave 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 context and draw! | ||
stave.setContext(context).draw(); | ||
|
||
// Create the notes | ||
const notes = [ | ||
new StaveNote({ | ||
keys: ['c/5'], | ||
duration: 'q', | ||
}), | ||
new StaveNote({ | ||
keys: ['d/4'], | ||
duration: 'q', | ||
}), | ||
new StaveNote({ | ||
keys: ['b/4'], | ||
duration: 'qr', | ||
}), | ||
new StaveNote({ | ||
keys: ['c/4', 'e/4', 'g/4'], | ||
duration: 'q', | ||
}), | ||
]; | ||
|
||
const notes2 = [ | ||
new StaveNote({ | ||
keys: ['c/4'], | ||
duration: 'w', | ||
}), | ||
]; | ||
|
||
// Create a voice in 4/4 and add above notes | ||
const voices = [ | ||
new Voice({ | ||
num_beats: 4, | ||
beat_value: 4, | ||
}).addTickables(notes), | ||
new Voice({ | ||
num_beats: 4, | ||
beat_value: 4, | ||
}).addTickables(notes2), | ||
]; | ||
|
||
// Format and justify the notes to 400 pixels. | ||
new Formatter().joinVoices(voices).format(voices, 350); | ||
|
||
// Render voices. | ||
voices.forEach(function (v) { | ||
v.draw(context, stave); | ||
}); | ||
</script> | ||
</body> | ||
</html> |