-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpiano.html
45 lines (44 loc) · 3.68 KB
/
piano.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Piano</title>
<link type="text/css" rel="stylesheet" href="pianoStyle.css"/>
<script src="pianoScript.js"></script>
</head>
<body onload="loadPiano()">
<!--Piano from https://gist.github.com/stevekinney/f581382ee6c8daf63a0c-->
<svg width="100%" viewBox="0 0 1120 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="piano">
<g id="piano-keyboard">
<g id="octave-1">
<rect id="octave-1-C-key" class="piano-key white-key" data-piano-key="C4" x="0" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-D-key" class="piano-key white-key" data-piano-key="D4" x="80" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-E-key" class="piano-key white-key" data-piano-key="E4" x="160" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-F-key" class="piano-key white-key" data-piano-key="F4" x="240" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-G-key" class="piano-key white-key" data-piano-key="G4" x="320" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-A-key" class="piano-key white-key" data-piano-key="A4" x="400" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-B-key" class="piano-key white-key" data-piano-key="B4" x="480" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-1-C#-key" class="piano-key black-key" data-piano-key="Db4" x="60" y="0" width="40" height="280"></rect>
<rect id="octave-1-D#-key" class="piano-key black-key" data-piano-key="Eb4" x="140" y="0" width="40" height="280"></rect>
<rect id="octave-1-F#-key" class="piano-key black-key" data-piano-key="Gb4" x="300" y="0" width="40" height="280"></rect>
<rect id="octave-1-G#-key" class="piano-key black-key" data-piano-key="Ab4" x="380" y="0" width="40" height="280"></rect>
<rect id="octave-1-A#-key" class="piano-key black-key" data-piano-key="Bb4" x="460" y="0" width="40" height="280"></rect>
</g>
<!-- <g id="octave-2" transform="translate(560.000000, 0.000000)">
<rect id="octave-2-C-key" class="piano-key white-key" data-piano-key="C5" x="0" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-D-key" class="piano-key white-key" data-piano-key="D5" x="80" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-E-key" class="piano-key white-key" data-piano-key="E5" x="160" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-F-key" class="piano-key white-key" data-piano-key="F5" x="240" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-G-key" class="piano-key white-key" data-piano-key="G5" x="320" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-A-key" class="piano-key white-key" data-piano-key="A5" x="400" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-B-key" class="piano-key white-key" data-piano-key="B5" x="480" y="0" rx="10" width="80" height="400"></rect>
<rect id="octave-2-C#-key" class="piano-key black-key" data-piano-key="Db5" x="60" y="0" width="40" height="280"></rect>
<rect id="octave-2-D#-key" class="piano-key black-key" data-piano-key="Eb5" x="140" y="0" width="40" height="280"></rect>
<rect id="octave-2-F#-key" class="piano-key black-key" data-piano-key="Gb5" x="300" y="0" width="40" height="280"></rect>
<rect id="octave-2-G#-key" class="piano-key black-key" data-piano-key="Ab5" x="380" y="0" width="40" height="280"></rect>
<rect id="octave-2-A#-key" class="piano-key black-key" data-piano-key="Bb5" x="460" y="0" width="40" height="280"></rect>
</g> -->
</g>
</svg>
</body>
</html>