-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (65 loc) · 3.58 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
<!DOCTYPE html>
<html>
<head>
<title>Soundwave Visualisation</title>
<link rel="stylesheet" href="style.css" />
<!-- Libraries -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type="text/javascript"></script>
<script src='riffwave.js' type="text/javascript"></script>
<!-- <script src="libs/require.js"></script> -->
<!-- Local scripts -->
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<div class="top-area">
<div class="piano-keyboard">
<!-- Ensuring these divs have no spaces in between, as they're rendered different widths in each browser -->
<div class="piano-key white-key" id="C3">
<span>C3</span>
</div><div class="piano-key white-key" id="D3">
</div><div class="piano-key white-key" id="E3">
</div><div class="piano-key white-key" id="F3">
</div><div class="piano-key white-key" id="G3">
</div><div class="piano-key white-key" id="A3">
</div><div class="piano-key white-key" id="B3">
</div><div class="piano-key white-key" id="C4">
<span>C4</span>
</div><div class="piano-key white-key" id="D4">
</div><div class="piano-key white-key" id="E4">
</div><div class="piano-key white-key" id="F4">
</div><div class="piano-key white-key" id="G4">
</div><div class="piano-key white-key" id="A4">
</div><div class="piano-key white-key" id="B4">
</div><div class="piano-key white-key" id="C5">
<span>C5</span>
</div><div class="piano-key white-key" id="D5">
</div><div class="piano-key white-key" id="E5">
</div><div class="piano-key white-key" id="F5">
</div><div class="piano-key white-key" id="G5">
</div><div class="piano-key white-key" id="A5">
</div><div class="piano-key white-key" id="B5">
</div><div class="piano-key black-key" id="Db3" style="left: 34px">
</div><div class="piano-key black-key" id="Eb3" style="left: 91px">
</div><div class="piano-key black-key" id="Gb3" style="left: 199px">
</div><div class="piano-key black-key" id="Ab3" style="left: 252px">
</div><div class="piano-key black-key" id="Bb3" style="left: 307px">
</div><div class="piano-key black-key" id="Db4" style="left: 415px">
</div><div class="piano-key black-key" id="Eb4" style="left: 469px">
</div><div class="piano-key black-key" id="Gb4" style="left: 577px">
</div><div class="piano-key black-key" id="Ab4" style="left: 631px">
</div><div class="piano-key black-key" id="Bb4" style="left: 685px">
</div><div class="piano-key black-key" id="Db5" style="left: 793px">
</div><div class="piano-key black-key" id="Eb5" style="left: 847px">
</div><div class="piano-key black-key" id="Gb5" style="left: 955px">
</div><div class="piano-key black-key" id="Ab5" style="left: 1009px">
</div><div class="piano-key black-key" id="Bb5" style="left: 1063px">
</div>
</div>
</div>
<div class="canvas-wrapper">
<canvas id="visualisation_canvas"></canvas>
</div>
<div id="hud" class="overlay">
</div>
</body>
</html>