-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
313 lines (280 loc) · 11.7 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="style.css">
<!--bootstrap 5-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<!--jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Ragtime!</title>
<script src="js/cookies.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-synth-tiny"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-gui-select"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-input-kbd"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-gm"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-midi-smf"></script>
<!-- za writanje MIDI fajlov, for some reason je na cdnju drugacn-->
<script src="js/JZZ.midi.SMF.js"></script>
<!-- tole je JZZ MIDIjs wrapper, glej var synth, ta je na cndju drugacn -->
<script src="js/JZZ.synth.MIDIjs.js"></script>
<!-- mqtt server -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"
type="text/javascript"></script>
<!-- funny names generator :) -->
<script src="js/RandomName.js"></script>
<!-- MIDIjs, za loadAndChangeTo() oziroma MIDI.loadplugin -->
<script src="https://unpkg.com/[email protected]/lib/midi.js"></script>
<!-- Base64 -->
<script src="js/Base64.js" type="text/javascript"></script>
<script src="js/Base64binary.js" type="text/javascript"></script>
<script src="js/WebAudioAPI.js" type="text/javascript"></script>
<!-- metronom -->
<script src="js/metronome.js"></script>
<!-- za spinner pri metronomu -->
<script src="js/input-spinner.js"></script>
</head>
<body style="background-color:rgb(207, 207, 207);">
<nav id="intro" class="navbar navbar-expand-sm navbar-light bg-light mb-0">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></span>
</button>
<demo class="navbar-brand ps-2"><b>Ragtime!</b></demo>
<button class="btn btn-dark d-inline-block d-sm-none ml-auto" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<button class="btn nav-link" type="button" data-bs-toggle="collapse" data-bs-target="#learn"
aria-expanded="false" aria-controls="learn">
Learn
</button>
</li>
</ul>
<div class="pe-2"></div>
<div class="pb-2"></div>
<button class="btn btn-warning btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#navodila"
style="cursor: help;">Help</button>
</div>
</div>
</nav>
<div id="mainContainer" class="d-flex">
<div id="sidebar" class="ps-2">
<!-- class name -->
<div id="classContainer" class="container-fluid p-3 pb-0">
<div id="classBar" class="row rounded-top bg-secondary text-white">
<div class="col my-1 overflow-auto">
<span>Class name:</span>
<span id="className"></span>
</div>
</div>
<div id="classMain" class="row rounded-bottom bg-light">
<div class="col p-3">
<button type="button" class="my-1 btn btn-primary btn-sm" id="changeSession"
onClick="promptAndJoinSession()"><i class="fas fa-music"></i> Change class name</button>
<button type="button" class="my-1 btn btn-primary btn-sm" id="joinSession"
onClick="promptAndJoinSession()"><i class="fas fa-handshake"></i> Join other
class</button>
<button type="button" class="my-1 btn btn-primary btn-sm" id="shareSession"
onClick="copyShareUrlToClipboard()"><i class="fas fa-share-alt"></i> Share this
class</button>
</div>
</div>
</div>
<!-- recordings -->
<div id="recordingsContainer" class="container p-3 pb-0">
<div id="recordingsBar" class="row rounded-top bg-secondary text-white">
<div class="col">
Recordings
</div>
</div>
<div id="recordingsMain" class="row rounded-bottom bg-light">
<div class="col p-3">
<div id="recordingsList" class="list-group">
</div>
<button class="btn btn-info btn-sm text-white" role="button" id="midiFileOut">
<i class="bi bi-file-earmark-music-fill"></i>
Select a recording
</button>
<div class="mt-2">
<div class="btn-group" role="group" aria-label="Playback controls">
<button type="button" class="btn btn-outline-dark" id=midiPlayerStop><i
class="fas fa-stop"></i></button>
<button type="button" class="btn btn-outline-dark" id=midiPlayerPlay><i
class="fas fa-play"></i></button>
<button type="button" class="btn btn-outline-danger" id=midiSessionRecord><i
class="fas fa-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- settings -->
<div id="settingsContainer" class="container-fluid p-3 pb-0">
<div id="settingsBar" class="row rounded-top bg-secondary text-white">
<div class="col my-1">
MIDI settings and controls
</div>
</div>
<div id="settingsMain" class="row rounded-bottom bg-light text-dark">
<div class="col p-3">
<div>
<select class="form-select form-select-sm" id="select_instruments">
</select>
<script src="js/sounds.js"></script>
<button id="apply_instrument_btn" type="button" class="btn btn-primary btn-sm mt-1 mb-1">
<span id="check_spin"><i class="bi bi-check-lg me-1"></i>
</span> Change sounds
</button>
</div>
<div class="mt-1">
MIDI IN
<select class="form-select form-select-sm" id="sel_in"></select>
</div>
<div class="mt-1">
MIDI OUT
<select class="form-select form-select-sm" id="sel_out"></select>
</div>
<!-- tuki bi lahko biu tak player?
https://jazz-soft.net/doc/JZZ/midiplayer.html -->
</div>
</div>
</div>
<!-- metronome -->
<div id="metronomeContainer" class="container p-3 pb-0">
<div id="metronomeBar" class="row rounded-top bg-secondary text-white">
<div class="col">
Metronome - <span id="metronomeMarking">Allegro</span>
</div>
</div>
<div id="metronomeMain" class="row rounded-bottom bg-light">
<div class="col p-3">
<input id="metronomeBpmValue" placeholder="Set BPM" required type="number" value="120" min="30"
max="300" step="1" />
<br>
<button type="button" class="btn btn-outline-dark btn-sm" id="metronomeButton"><i
class="fas fa-drum"></i> Start</button>
</div>
</div>
</div>
</div>
<div id="content" class="ps-2 container-fluid">
<div id="klaviature">
<!-- tole je za lokalnega userja, da vidis sam sebe -->
<div id="mainPlayer" class="container-fluid p-3">
<div id="mainPlayerStatusBar" class="row rounded-top bg-secondary text-white">
<div class="col">
<button type="button" class="btn btn-sm btn-secondary">
<span id="myName">myName</span> <span id="myRtt" class="badge badge-light">0 ms</span>
</button>
</div>
</div>
<div id="mainPlayerPianoroll" class="row rounded-bottom bg-light text-white">
<div class="col">
<div id="pianoIn_space" class="my-1 pianoroll"></div>
</div>
</div>
</div>
</div>
<div id="learn" class="collapse me-4">
<div id="learn_swap" class="row m-2 p-2 me-3 mt-3 ms-1 bg-white rounded container-fluid">
</div>
<div class="d-none d-xl-block row"></div>
<!--to je zato da se zgornji div ne potegne do konca strani-->
</div>
</div>
</div>
<!-- navodila -->
<div class="modal fade" id="navodila" tabindex="-1" aria-labelledby="navodila" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="help_modal">Help</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
<span class="text-success">MIDI IN</span> - choose device you will be playing on.
Your keystrokes will be displayed on first pianoroll. Click on pianoroll name to change it.
Others joining this session will see you by that name as you will see separate pianoroll for
each participant.
In case you don't have any MIDI devices attached you can play on QWERTY keyboard by choosing
'HTML Piano In'. Click on your pianoroll, then type on your keyboard.
If you just want to observe and listen then only choose MIDI OUT device.
</p>
<p>
<span class="text-success">MIDI OUT</span> - how do you want keystrokes from others to be
played.
Keystrokes from others will also be shown and played on separate pianorolls for each
participant.
If you just want to listen choose 'Web Audio' and enjoy when others play :)
</p>
<p>
By <span class="text-success">recording</span> the masterpiece you play it will instantly make
it permanently available for others
joining this session at any time. They can playback and observe keystrokes you made so be
expressive for others that will learn from you :) Just hit <span
class="text-danger">Record</span> button and start playing.
After you finish hit <span class="text-danger">Record</span> again or <span
class="text-danger">Stop</span>. MIDI file will
also became downloadable but there is a catch; BPM is fixed to 120 and it will stay like that
until we implement metronome.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ostale skripte -->
<div>
<script src="app.js"></script>
<!--bootstrap 5-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$(this).toggleClass('active');
});
});
</script>
<script>
function enablePopovers() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
}
enablePopovers();
</script>
<script src="js/learn.js"></script>
</div>
</body>
</html>