forked from MSD200X/vexui
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
75 lines (75 loc) · 3.17 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Support Scripts -->
<!--
<script type="text/javascript" src="./lib/vexflow-debug.js"></script>
<script type="text/javascript" src="./lib/jquery-2.0.0.js"></script>
<script type="text/javascript" src="./lib/MIDI.min.js"></script>
<script type="text/javascript" src="./lib/Base64.js"></script>
<script type="text/javascript" src="./lib/base64binary.js"></script>
-->
<!-- UI scripts -->
<!--
<script type="text/javascript" src="./src/UI.js"></script>
<script type="text/javascript" src="./src/Util.js"></script>
<script type="text/javascript" src="./src/Handler.js"></script>
<script type="text/javascript" src="./src/MouseListener.js"></script>
<script type="text/javascript" src="./src/NoteMap.js"></script>
<script type="text/javascript" src="./src/VexFlowExtension.js"></script>
<script type="text/javascript" src="./src/Constants.js"></script>
<script type="text/javascript" src="./src/KeyboardListener.js"></script>
<script type="text/javascript" src="./src/NoteMenu.js"></script>
<script type="text/javascript" src="./src/Button.js"></script>
<script type="text/javascript" src="./src/NoteMenuButtonRenderer.js"></script>
<script type="text/javascript" src="./src/Toolbar.js"></script>
<script type="text/javascript" src="./src/TipRenderer.js"></script>
<script type="text/javascript" src="./src/Player.js"></script>
-->
<script type="text/javascript" src="lib/vendor/Base64.js"></script>
<script type="text/javascript" src="lib/vendor/base64binary.js"></script>
<script type="text/javascript" src="lib/vendor/MIDI.min.js"></script>
<script type="text/javascript" src="build/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/VexUI.css">
<style type="text/css">
#instructions {
margin: 50px auto;
padding: 10px;
border: 1px solid black;
width: 625px;
}
</style>
<title>VexUI Demo</title>
</head>
<body>
<div id="container"></div>
<section id="instructions">
<h3>Instructions</h3><br />
<p>
Use your mouse to start creating music:
<ul>
<li>
Left-click to insert current music engraving<br />(Left clicking with note selected on an existing note
will start a chord);
</li>
<li>
Middle-click to change current engraving type: Cycles through notes, rests, bars, clefs, and back to notes;
</li>
<li>
Scroll Mouse to change notes and rest durations, or bars and clefs types;
</li>
<li>
Right-click on a note to open a menu with some options (ties are still not implemented).
</li>
<li>
Hit play and listen to your music!
</li>
</ul>
</p>
</section>
<script type="text/javascript">
var handler = new Vex.UI.Handler("container").init()
</script>
</body>
</html>