-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
194 lines (169 loc) · 8.28 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>springs</title>
<link rel="icon" type="image/png" href="assets/springs_icon.png"/>
<!-- jQuery[UI].js -->
<link rel="stylesheet" href="src/include/jqUI/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<link rel="stylesheet" href="style.css">
<script src="src/include/jqUI/external/jquery/jquery.js"></script>
<script src="src/include/jqUI/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
<!-- JZZ.js -->
<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-smf"></script>
<!-- SVG.js -->
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<!-- tune.js -->
<script src="src/include/tune.js"></script>
<!-- Other dependencies: svg-intersections bezier-easing -->
</head>
<body>
<div class="loader-container">
<p>loading...</p>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
</div>
<!-- Info about key commands -->
<div class="white-highlight control-screen">
<div id="controls">
<h2 style="text-align: center">
springs - a new approach to music editing
</h2>
<p>
<strong>Drag the background</strong> - select using a box<br/>
<strong>Shift+Drag the background</strong> - move around the editor<br/>
<strong>Cmd+Drag the background</strong> - create a note<br/>
<strong>Mousewheel</strong> - move around the editor<br/>
<strong>Ctrl+Mousewheel</strong> - change the display scale of the editor<br/>
<strong>Alt+Drag</strong> - copy the selected note(s) and move to a new location<br/>
<strong>Cmd+C</strong> - copy<br/>
<strong>Cmd+V</strong> - paste<br/>
<strong>Cmd+A</strong> - select all<br/>
<em>(undo/redo coming soon)</em><br/><br/>
<strong>Drag note body</strong> - move the selected note(s) in pitch and/or time<br/>
<strong>Drag right handle</strong> - change the end time of the selected note(s)<br/>
<strong>Drag left handle</strong> - change the start time of the selected note(s)<br/>
<strong>Drag left square</strong> - connect to another note by the JI interval closest
to their current equal-tempered interval<br/><br/>
<strong>Shift+Drag</strong> - adjust pitch bend of selected note(s)<br/>
<strong>Cmd+↑</strong> - transpose up an octave<br/>
<strong>Cmd+↓</strong> - transpose down an octave<br/>
<strong>Cmd+2</strong> - divide the selected interval in two (or the interval between the selected notes).
Also works for numbers 3 to 9<br/>
<strong>Cmd+R</strong> - reset the selected note to a pitch bend of zero<br/><br/>
<strong>Enter</strong> - open an editing screen for adjusting the selected notes or intervals<br/>
<strong>Delete</strong> - delete the selected notes or intervals<br/>
<strong>Spacebar</strong> - start or stop playback<br/>
<strong>Shift+Spacebar</strong> - start or stop playback of only the selected notes<br/><br/>
<strong>A W S E D F T G Y H U J K O L P ;</strong> - play back notes using the computer keyboard as a piano keyboard! the given
keys correspond to chromatically ascending pitches from C to E, and they are arranged like on a piano.<br/>
<strong>Z X</strong> - shift the computer-piano keyboard up (<strong>X</strong>) or down (<strong>Z</strong>) an octave<br/>
</p>
<p style="text-align: center" class="white-highlight">
<em>this app is still under development. if something goes wrong, press "clear all data" and refresh the page.</em><br/>
</p>
</div>
</div>
<!-- Settings -->
<div class="white-highlight setting-screen">
<div class="setting">
<input type="checkbox" name="prop-bend" id="prop-bend" checked>
<label for="prop-bend">Propagate bend upon deletion of an edge</label>
</div>
<div class="setting">
<input type="checkbox" name="show-edges" id="show-edges">
<label for="show-edges">Always show interval sizes</label>
</div>
<div class="setting">
<label for="default-easing">Default gliss shape:</label>
<div>
<div id="easing-demo"></div>
<input id="easing-range" type="range"
name="default-easing" value="0.5"
max="1" min="0.01" step="any" style="width: 75px">
</div>
</div>
</div>
<!-- MIDI export Settings -->
<div class="white-highlight midi-export">
<p style="font-size: 0.8em;">
This exporting process will automatically partition your file into
different voices (MIDI tracks) in order to preserve polyphonic pitch bends.
Open this file with a DAW and assign these tracks to the instrument of your choice.
</p>
<div class="setting">
<label for="bend-range"
class="has-tooltip"
title="Enter the 'pitch bend width' (in semitones) of the instrument you intend to use this MIDI data with.
Setting this correctly ensures the pitch bend from springs and your instrument will match.">Pitch bend width of your virtual instrument</label>
<div>
<input id="bend-range" type="number"
name="bend-range" value="1"
max="128.0" min="0.0" step="0.1" style="width: 75px">
</div>
</div>
<div class="setting">
<label for="bend-range">Filename</label>
<div>
<input id="midi-filename" type="text"
name="midi-filename">
.mid
</div>
</div>
<div>
<button id="midi-export-cancel">Cancel</button>
<button id="midi-export-button">Export</button>
</div>
</div>
<div id="sequencer">
<!-- controls -->
<div id="controls-container">
<div class="filename-container">
<input value="untitled" maxlength="50"
type="text" title="Rename"
class="filename" placeholder="untitled"/>
<span class="save-time-container">
<img src="assets/check_icon.png" width="10">
<span id="save-time"></span>
</span>
</div>
<div class="file-button-container"></div>
</div>
<!-- GUI -->
<div class="seq">
<!-- keyboard -->
<div class="left-container">
<button id="ruler-controls"></button>
<div class="piano-container hidden-scrollable">
<div id="roll-keyboard"></div>
</div>
</div>
<!-- ruler -->
<div class="ruler-container hidden-scrollable">
<span id="ruler"></span>
</div>
<!-- piano roll -->
<div class="right-container">
<div id="piano-roll" class="has-contextmenu"></div>
</div>
</div>
</div>
<div class="footer white-highlight">
<p>
<strong>© stephen karukas 2020</strong><br/>
app still under development (this is only a demo). please come back later :^)
</p>
</div>
<!-- Global messages for the user -->
<div class="warn-container"></div>
<script src="springs.js"></script>
</body>
</html>