-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.html
96 lines (77 loc) · 2.83 KB
/
examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery VexFlow Examples</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="vendor/underscore.js" type="text/javascript"></script>
<script src="vendor/vexflow.js" type="text/javascript"></script>
<script src="vendor/vexflow-json.js" type="text/javascript"></script>
<script src="jquery.vexflow-json.js" type="text/javascript"></script>
</head>
<body>
<h1>jQuery VexFlow Examples</h1>
<h2>Simple Chord</h2>
<div id="simple-chord" width="200"></div>
<script type="text/javascript">
$("#simple-chord").vexflow(["C", "E", "G", "Bb"]);
</script>
<h2>Simple Chord</h2>
<div id="simple-chord-scaled" data-scale="0.75" width="200"></div>
<script type="text/javascript">
$("#simple-chord-scaled").vexflow(["C", "E", "G", "Bb"]);
</script>
<h2>Simple Chord with Octaves</h2>
<div id="simple-chord-with-octaves"></div>
<script type="text/javascript">
$("#simple-chord-with-octaves").vexflow(["C/5", "E/5", "G/5", "Bb/5"], { width: 150 });
</script>
<h2>Simple Chord with Duration</h2>
<div id="simple-chord-with-duration"></div>
<script type="text/javascript">
$("#simple-chord-with-duration").vexflow({
duration: "h",
keys: ["C", "E", "G", "Bb"]
});
</script>
<h2>Simple Sequence of Chords</h2>
<div id="simple-sequence-of-chords"></div>
<script type="text/javascript">
$("#simple-sequence-of-chords").vexflow([
["C", "Eb", "G", "Bb"],
["C", "Eb", "F", "A"],
["Bb", "D", "F", "A"]
]);
</script>
<h2>Explicit Sequence of Chords</h2>
<div id="explicit-sequence-of-chords"></div>
<script type="text/javascript">
$("#explicit-sequence-of-chords").vexflow({
clef: "treble",
notes: [
{ duration: "q", keys: ["C", "Eb", "G", "Bb"] },
{ duration: "q", keys: ["C", "Eb", "F", "A"] },
{ duration: "h", keys: ["Bb", "D", "F", "A"] }
]
});
</script>
<h2>Simple Chord across Clefs</h2>
<div id="simple-chord-across-clefs"></div>
<script type="text/javascript">
$("#simple-chord-across-clefs").vexflow(["C/3", "E/3", "G/4", "Bb/4"], { clef: ["treble", "bass"], width: 150, height: 180 });
</script>
<h2>Explicit Voices</h2>
<h2>TODO</h2>
<h2>Explicit Voices with Beaming</h2>
<h2>TODO</h2>
<h2>Simple Chord - Inline</h2>
<div id="simple-chord-inline" data-staff='["C", "E", "G", "Bb"]'></div>
<script type="text/javascript">
$("#simple-chord-inline").vexflow();
</script>
<h2>Simple Chord across Clefs - Inline</h2>
<div id="simple-chord-across-clefs-inline" height="180" data-clef="treble,bass" data-staff='["C/3", "E/3", "G/4", "Bb/4"]'></div>
<script type="text/javascript">
$("#simple-chord-across-clefs-inline").vexflow();
</script>
</body>
</html>