-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
497 lines (492 loc) · 19.6 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
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
crossorigin="anonymous"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DJ Kit</title>
<link rel="stylesheet" href="style.css" />
<script src="js/audioCtx.js"></script>
<script type="module" src="js/pianoSounds.js"></script>
<script src="js/main.js"></script>
<script src="js/drums.js"></script>
<script type="module" src="js/record.js"></script>
<script src="js/voiceRecord.js"></script>
<script type="module" src="js/sampleLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lamejs/1.2.0/lame.all.js"></script>
</head>
<body>
<div class="container">
<br />
<div class="row justify-content-end">
<div class="col-1">
<div>
<button class="voice-button" id="voice-rec-btn">
<i class="fas fa-microphone" id="microphone"></i>Voice
</button>
</div>
<div>
<button class="voice-button" id="voice-play-btn">
<i class="fas fa-play" id="play"></i>Voice
</button>
</div>
</div>
<div class="col-2">
<svg
id="rec-btn"
width="139"
height="63"
viewBox="0 0 139 63"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<g filter="url(#filter0_d_112_115)">
<rect
id="rec-box"
x="4"
y="4"
width="131"
height="55"
rx="9"
stroke="#8180FF"
stroke-width="2"
shape-rendering="crispEdges"
/>
</g>
<path
id="rec-text"
d="M62.642 42V20.1818H70.0142C71.7188 20.1818 73.1179 20.473 74.2116 21.0554C75.3054 21.6307 76.1151 22.4226 76.6406 23.4311C77.1662 24.4396 77.429 25.5866 77.429 26.8722C77.429 28.1577 77.1662 29.2976 76.6406 30.2919C76.1151 31.2862 75.3089 32.0675 74.2223 32.6357C73.1357 33.1967 71.7472 33.4773 70.0568 33.4773H64.0909V31.0909H69.9716C71.1364 31.0909 72.0739 30.9205 72.7841 30.5795C73.5014 30.2386 74.0199 29.7557 74.3395 29.1307C74.6662 28.4986 74.8295 27.7457 74.8295 26.8722C74.8295 25.9986 74.6662 25.2351 74.3395 24.5817C74.0128 23.9283 73.4908 23.424 72.7734 23.0689C72.0561 22.7067 71.108 22.5256 69.929 22.5256H65.2841V42H62.642ZM72.9119 32.1989L78.2812 42H75.2131L69.929 32.1989H72.9119ZM82.4315 42V20.1818H95.5991V22.5256H85.0735V29.8977H94.9173V32.2415H85.0735V39.6562H95.7696V42H82.4315ZM118.518 27H115.876C115.72 26.2401 115.446 25.5724 115.056 24.9972C114.672 24.4219 114.203 23.9389 113.649 23.5483C113.103 23.1506 112.495 22.8523 111.828 22.6534C111.16 22.4545 110.464 22.3551 109.74 22.3551C108.419 22.3551 107.222 22.6889 106.149 23.3565C105.084 24.0241 104.235 25.0078 103.603 26.3075C102.978 27.6072 102.666 29.2017 102.666 31.0909C102.666 32.9801 102.978 34.5746 103.603 35.8743C104.235 37.174 105.084 38.1577 106.149 38.8253C107.222 39.4929 108.419 39.8267 109.74 39.8267C110.464 39.8267 111.16 39.7273 111.828 39.5284C112.495 39.3295 113.103 39.0348 113.649 38.6442C114.203 38.2464 114.672 37.7599 115.056 37.1847C115.446 36.6023 115.72 35.9347 115.876 35.1818H118.518C118.319 36.2969 117.957 37.2947 117.431 38.1754C116.906 39.0561 116.252 39.8054 115.471 40.4233C114.69 41.0341 113.813 41.4993 112.84 41.8189C111.874 42.1385 110.84 42.2983 109.74 42.2983C107.879 42.2983 106.224 41.8438 104.775 40.9347C103.326 40.0256 102.186 38.733 101.355 37.0568C100.524 35.3807 100.109 33.392 100.109 31.0909C100.109 28.7898 100.524 26.8011 101.355 25.125C102.186 23.4489 103.326 22.1562 104.775 21.2472C106.224 20.3381 107.879 19.8835 109.74 19.8835C110.84 19.8835 111.874 20.0433 112.84 20.3629C113.813 20.6825 114.69 21.1513 115.471 21.7692C116.252 22.38 116.906 23.1257 117.431 24.0064C117.957 24.88 118.319 25.8778 118.518 27Z"
fill="#8180FF"
/>
<circle
id="rec-cir"
cx="33.5"
cy="31.5"
r="11.5"
stroke="#DED8EA"
stroke-width="2"
/>
<defs>
<filter
id="filter0_d_112_115"
x="0"
y="0"
width="139"
height="63"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feMorphology
radius="2"
operator="dilate"
in="SourceAlpha"
result="effect1_dropShadow_112_115"
/>
<feOffset />
<feGaussianBlur stdDeviation="0.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.505882 0 0 0 0 0.501961 0 0 0 0 1 0 0 0 0.36 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_112_115"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_112_115"
result="shape"
/>
</filter>
</defs>
</svg>
<button id="play-rec" class="btn btn-primary">
<svg
width="20px"
height="20px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 5V19M21 5V19M3 7.20608V16.7939C3 17.7996 3 18.3024 3.19886 18.5352C3.37141 18.7373 3.63025 18.8445 3.89512 18.8236C4.20038 18.7996 4.55593 18.4441 5.26704 17.733L10.061 12.939C10.3897 12.6103 10.554 12.446 10.6156 12.2565C10.6697 12.0898 10.6697 11.9102 10.6156 11.7435C10.554 11.554 10.3897 11.3897 10.061 11.061L5.26704 6.26704C4.55593 5.55593 4.20038 5.20038 3.89512 5.17636C3.63025 5.15551 3.37141 5.26273 3.19886 5.46476C3 5.69759 3 6.20042 3 7.20608Z"
stroke="#FFFFFF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="col-1">
<span id="download-link" onclick="downloadRecording()">
<i class="fas fa-download"></i
></span>
</div>
</div>
<ul class="nav nav-tabs" id="instrument-tab" role="tabList">
<li class="nav-item active" role="presentation">
<button
class="nav-link active"
id="piano-tab"
onclick="openComponent('piano', this)"
>
Keyboard
</button>
</li>
<li class="nav-item active" role="presentation">
<button
class="nav-link"
id="drums-tab"
onclick="openComponent('drums', this)"
>
Drums
</button>
</li>
</ul>
<!-- ----------PIANO---------- -->
<div class="component" id="piano">
<p>Select key mode:</p>
<select id="mode">
<option value="osc">oscillator</option>
<option value="piano">piano</option>
<option value="harpsichord">harpsichord</option>
<option value="custom">sample upload</option>
</select>
<input id="sample-audio" type="file" style="visibility: hidden" />
<main>
<svg
viewBox="0 0 1602 420"
fill="none"
xmlns="http://www.w3.org/2000/svg"
id="piano"
>
<path
class="black-key"
id="f_sharp4"
d="M385 0H441V260C441 268.284 434.284 275 426 275H400C391.716 275 385 268.284 385 260V0Z"
fill="black"
/>
<path
class="black-key"
id="g_sharp4"
d="M503 0H559V260C559 268.284 552.284 275 544 275H518C509.716 275 503 268.284 503 260V0Z"
fill="black"
/>
<path
class="black-key"
id="a_sharp4"
d="M621 0H677V260C677 268.284 670.284 275 662 275H636C627.716 275 621 268.284 621 260V0Z"
fill="black"
/>
<path
class="black-key"
id="c_sharp5"
d="M818 0H874V260C874 268.284 867.284 275 859 275H833C824.716 275 818 268.284 818 260V0Z"
fill="black"
/>
<path
class="black-key"
id="f_sharp5"
d="M1138 0H1194V260C1194 268.284 1187.28 275 1179 275H1153C1144.72 275 1138 268.284 1138 260V0Z"
fill="black"
/>
<path
class="black-key"
id="g_sharp5"
d="M1256 0H1312V260C1312 268.284 1305.28 275 1297 275H1271C1262.72 275 1256 268.284 1256 260V0Z"
fill="black"
/>
<path
class="black-key"
id="a_sharp5"
d="M1374 0H1430V260C1430 268.284 1423.28 275 1415 275H1389C1380.72 275 1374 268.284 1374 260V0Z"
fill="black"
/>
<path
class="black-key"
id="c_sharp4"
d="M65 0H121V260C121 268.284 114.284 275 106 275H80C71.7157 275 65 268.284 65 260V0Z"
fill="black"
/>
<path
class="black-key"
id="d_sharp4"
d="M191 0H247V260C247 268.284 240.284 275 232 275H206C197.716 275 191 268.284 191 260V0Z"
fill="black"
/>
<path
class="black-key"
id="d_sharp5"
d="M944 0H1000V260C1000 268.284 993.284 275 985 275H959C950.716 275 944 268.284 944 260V0Z"
fill="black"
/>
<path
class="white-key"
id="c4"
d="M0.5 15C0.5 6.99186 6.99187 0.5 15 0.5H59.5V265C59.5 273.56 66.4396 280.5 75 280.5H98.5V405C98.5 413.008 92.0081 419.5 84 419.5H15C6.99187 419.5 0.5 413.008 0.5 405V15Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="d4"
d="M107.5 405V280.5H111C119.56 280.5 126.5 273.56 126.5 265V0.5H185.5V265C185.5 273.56 192.44 280.5 201 280.5H205.5V405C205.5 413.008 199.008 419.5 191 419.5H122C113.992 419.5 107.5 413.008 107.5 405Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="e4"
d="M253.5 265V0.5H312.5V405C312.5 413.008 306.008 419.5 298 419.5H229C220.992 419.5 214.5 413.008 214.5 405V280.5H238C246.56 280.5 253.5 273.56 253.5 265Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="f4"
d="M321.5 0.5H380.5V265C380.5 273.56 387.44 280.5 396 280.5H419.5V405C419.5 413.008 413.008 419.5 405 419.5H336C327.992 419.5 321.5 413.008 321.5 405V0.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
class="white-key"
id="c5"
d="M751.5 0.5H810.5V265C810.5 273.56 817.44 280.5 826 280.5H849.5V405C849.5 413.008 843.008 419.5 835 419.5H766C757.992 419.5 751.5 413.008 751.5 405V0.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="g4"
d="M428.5 405V280.5H432C440.56 280.5 447.5 273.56 447.5 265V0.5H498.5V265C498.5 273.56 505.44 280.5 514 280.5H526.5V405C526.5 413.008 520.008 419.5 512 419.5H443C434.992 419.5 428.5 413.008 428.5 405Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="a4"
d="M633.5 280.5V405C633.5 413.008 627.008 419.5 619 419.5H550C541.992 419.5 535.5 413.008 535.5 405V280.5H548C556.56 280.5 563.5 273.56 563.5 265V0.5H614.5V265C614.5 273.56 621.44 280.5 630 280.5H633.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="d5"
d="M860.5 405V280.5H864C872.56 280.5 879.5 273.56 879.5 265V0.5H938.5V265C938.5 273.56 945.44 280.5 954 280.5H958.5V405C958.5 413.008 952.008 419.5 944 419.5H875C866.992 419.5 860.5 413.008 860.5 405Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="e5"
d="M1006.5 265V0.5H1065.5V405C1065.5 413.008 1059.01 419.5 1051 419.5H982C973.992 419.5 967.5 413.008 967.5 405V280.5H991C999.56 280.5 1006.5 273.56 1006.5 265Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="f5"
d="M1074.5 0.5H1133.5V265C1133.5 273.56 1140.44 280.5 1149 280.5H1172.5V405C1172.5 413.008 1166.01 419.5 1158 419.5H1089C1080.99 419.5 1074.5 413.008 1074.5 405V0.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="g5"
d="M1181.5 405V280.5H1185C1193.56 280.5 1200.5 273.56 1200.5 265V0.5H1251.5V265C1251.5 273.56 1258.44 280.5 1267 280.5H1279.5V405C1279.5 413.008 1273.01 419.5 1265 419.5H1196C1187.99 419.5 1181.5 413.008 1181.5 405Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="a5"
d="M1386.5 280.5V405C1386.5 413.008 1380.01 419.5 1372 419.5H1303C1294.99 419.5 1288.5 413.008 1288.5 405V280.5H1301C1309.56 280.5 1316.5 273.56 1316.5 265V0.5H1367.5V265C1367.5 273.56 1374.44 280.5 1383 280.5H1386.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="b5"
d="M1434.5 265V0.5H1493.5V405C1493.5 413.008 1487.01 419.5 1479 419.5H1410C1401.99 419.5 1395.5 413.008 1395.5 405V280.5H1419C1427.56 280.5 1434.5 273.56 1434.5 265Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="c6"
d="M1502.5 0.5H1591C1596.25 0.5 1600.5 4.75329 1600.5 10V400C1600.5 410.77 1591.77 419.5 1581 419.5H1522C1511.23 419.5 1502.5 410.77 1502.5 400V0.5Z"
fill="white"
stroke="black"
/>
<path
class="white-key"
id="b4"
d="M742.5 0.5H683.5V265C683.5 273.56 676.56 280.5 668 280.5H644.5V405C644.5 413.008 650.992 419.5 659 419.5H728C736.008 419.5 742.5 413.008 742.5 405V0.5Z"
fill="white"
stroke="black"
/>
</svg>
</main>
</div>
<!-- ----------DRUMS---------- -->
<div class="component drums" id="drums" style="display: none">
<div class="drum-pad drum" id="hi-hat" data-key="Q">
<p style="text-align: center">
Hi-Hat<br />
Q
</p>
<audio
class="clip"
id="Q"
src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
></audio>
</div>
<div class="drum-pad drum" id="hi-hat-closed" data-key="W">
<p style="text-align: center">
Hi-Hat Closed <br />
W
</p>
<audio
class="clip"
id="W"
src="https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3"
></audio>
</div>
<div class="drum-pad drum" id="hi-hat-open" data-key="E">
<p style="text-align: center">
Hi-Hat Open <br />
E
</p>
<audio
class="clip"
id="E"
src="https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3"
></audio>
</div>
<div class="drum-pad drum" id="ride" data-key="R">
<p style="text-align: center">
Kick n Hat <br />
R
</p>
<audio
class="clip"
id="R"
src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
></audio>
</div>
<div class="drum-pad drum" id="kick" data-key="A">
<p style="text-align: center">
Kick <br />
A
</p>
<audio
class="clip"
id="A"
src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
></audio>
</div>
<div class="drum-pad drum" id="hi-hat-pedal" data-key="S">
<p style="text-align: center">
Punchy Kick <br />
S
</p>
<audio
class="clip"
id="S"
src="https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3"
></audio>
</div>
<div class="drum-pad drum" id="snare" data-key="D">
<p style="text-align: center">
Snare <br />
D
</p>
<audio
class="clip"
id="D"
src="https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"
></audio>
</div>
<div class="drum-pad drum" id="clap" data-key="F">
<p style="text-align: center">
Clap <br />
F
</p>
<audio
class="clip"
id="F"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
></audio>
</div>
<div class="drum-pad drum" id="tom-1" data-key="Z">
<p style="text-align: center">
Tom 1 <br />
Z
</p>
<audio
class="clip"
id="Z"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
></audio>
</div>
<div class="drum-pad drum" id="tom-2" data-key="X">
<p style="text-align: center">
Tom 2 <br />
X
</p>
<audio
class="clip"
id="X"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
></audio>
</div>
<div class="drum-pad drum" id="tom-3" data-key="C">
<p style="text-align: center">
Tom 3 <br />
C
</p>
<audio
class="clip"
id="C"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
></audio>
</div>
<div class="drum-pad drum" id="tom-4" data-key="V">
<p style="text-align: center">
Tom 4 <br />
V
</p>
<audio
class="clip"
id="V"
src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
></audio>
</div>
</div>
</div>
</body>
<hr />
</html>