-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
135 lines (125 loc) · 33.4 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audiophonic</title>
<link rel="stylesheet" href="src/components/fira/fira.css" >
</head>
<body>
<div class="container">
<h1>Audiophonic</h1>
<p class="instructions">
<strong>Instructions</strong>: Hover over any key on the piano keyboard below to trigger a note. Even better, press any of the keys highlighted on the computer keyboard to trigger a note. Most importantly: have fun.
</p>
<div class="piano keyboard">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800px" height="300px" viewBox="0 0 1120 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Piano Keyboard</title>
<defs></defs>
<g id="piano-keyboard">
<g id="octave-1">
<rect id="piano-key-C3" class="piano-key white-key" data-piano-key="C3" stroke="#555555" fill="#FFFFF7" x="0" y="0" width="80" height="400"></rect>
<rect id="piano-key-D3" class="piano-key white-key" data-piano-key="D3" stroke="#555555" fill="#FFFFF7" x="80" y="0" width="80" height="400"></rect>
<rect id="piano-key-E3" class="piano-key white-key" data-piano-key="E3" stroke="#555555" fill="#FFFFF7" x="160" y="0" width="80" height="400"></rect>
<rect id="piano-key-F3" class="piano-key white-key" data-piano-key="F3" stroke="#555555" fill="#FFFFF7" x="240" y="0" width="80" height="400"></rect>
<rect id="piano-key-G3" class="piano-key white-key" data-piano-key="G3" stroke="#555555" fill="#FFFFF7" x="320" y="0" width="80" height="400"></rect>
<rect id="piano-key-A3" class="piano-key white-key" data-piano-key="A3" stroke="#555555" fill="#FFFFF7" x="400" y="0" width="80" height="400"></rect>
<rect id="piano-key-B3" class="piano-key white-key" data-piano-key="B3" stroke="#555555" fill="#FFFFF7" x="480" y="0" width="80" height="400"></rect>
<rect id="piano-key-C#3" class="piano-key black-key" data-piano-key="C#3" stroke="#979797" fill="#4B4B4B" x="60" y="0" width="40" height="280"></rect>
<rect id="piano-key-D#3" class="piano-key black-key" data-piano-key="D#3" stroke="#979797" fill="#4B4B4B" x="140" y="0" width="40" height="280"></rect>
<rect id="piano-key-F#3" class="piano-key black-key" data-piano-key="F#3" stroke="#979797" fill="#4B4B4B" x="300" y="0" width="40" height="280"></rect>
<rect id="piano-key-G#3" class="piano-key black-key" data-piano-key="G#3" stroke="#979797" fill="#4B4B4B" x="380" y="0" width="40" height="280"></rect>
<rect id="piano-key-A#3" class="piano-key black-key" data-piano-key="A#3" stroke="#979797" fill="#4B4B4B" x="460" y="0" width="40" height="280"></rect>
</g>
<g id="octave-2" transform="translate(560.000000, 0.000000)">
<rect id="piano-key-C4" class="piano-key white-key" data-piano-key="C4" stroke="#555555" fill="#FFFFF7" x="0" y="0" width="80" height="400"></rect>
<rect id="piano-key-D4" class="piano-key white-key" data-piano-key="D4" stroke="#555555" fill="#FFFFF7" x="80" y="0" width="80" height="400"></rect>
<rect id="piano-key-E4" class="piano-key white-key" data-piano-key="E4" stroke="#555555" fill="#FFFFF7" x="160" y="0" width="80" height="400"></rect>
<rect id="piano-key-F4" class="piano-key white-key" data-piano-key="F4" stroke="#555555" fill="#FFFFF7" x="240" y="0" width="80" height="400"></rect>
<rect id="piano-key-G4" class="piano-key white-key" data-piano-key="G4" stroke="#555555" fill="#FFFFF7" x="320" y="0" width="80" height="400"></rect>
<rect id="piano-key-A4" class="piano-key white-key" data-piano-key="A4" stroke="#555555" fill="#FFFFF7" x="400" y="0" width="80" height="400"></rect>
<rect id="piano-key-B4" class="piano-key white-key" data-piano-key="B4" stroke="#555555" fill="#FFFFF7" x="480" y="0" width="80" height="400"></rect>
<rect id="piano-key-C#4" class="piano-key black-key" data-piano-key="C#4" stroke="#979797" fill="#4B4B4B" x="60" y="0" width="40" height="280"></rect>
<rect id="piano-key-D#4" class="piano-key black-key" data-piano-key="D#4" stroke="#979797" fill="#4B4B4B" x="140" y="0" width="40" height="280"></rect>
<rect id="piano-key-F#4" class="piano-key black-key" data-piano-key="F#4" stroke="#979797" fill="#4B4B4B" x="300" y="0" width="40" height="280"></rect>
<rect id="piano-key-G#4" class="piano-key black-key" data-piano-key="G#4" stroke="#979797" fill="#4B4B4B" x="380" y="0" width="40" height="280"></rect>
<rect id="piano-key-A#4" class="piano-key black-key" data-piano-key="A#4" stroke="#979797" fill="#4B4B4B" x="460" y="0" width="40" height="280"></rect>
</g>
</g>
</svg>
</div>
<div class="computer keyboard">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="800px" height="300px" viewBox="0 0 599 206" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Keyboard</title>
<g id="keyboard" transform="translate(-1.000000, -1.000000)" stroke="#636462" stroke-width="0.25" stroke-linejoin="round">
<path id="key-backtick" class="computer-key key-code-192" d="M38.037931,32.03118 C38.037931,34.35579 36.1593103,36.22914 33.837931,36.22914 L5.6462069,36.22914 C3.32896552,36.22914 1.45034483,34.35579 1.45034483,32.03118 L1.45034483,6.04854 C1.45034483,3.73221 3.32896552,1.85058 5.6462069,1.85058 L33.837931,1.85058 C36.1593103,1.85058 38.037931,3.73221 38.037931,6.04854 L38.037931,32.03118 L38.037931,32.03118 Z"></path>
<path id="key-1" class="computer-key key-code-49" data-key-code="49" d="M79.7958621,32.03118 C79.7958621,34.35579 77.9172414,36.22914 75.597931,36.22914 L47.4041379,36.22914 C45.0848276,36.22914 43.2103448,34.35579 43.2103448,32.03118 L43.2103448,6.04854 C43.2103448,3.73221 45.0848276,1.85058 47.4041379,1.85058 L75.597931,1.85058 C77.9172414,1.85058 79.7958621,3.73221 79.7958621,6.04854 L79.7958621,32.03118 L79.7958621,32.03118 Z"></path>
<path id="key-2" class="computer-key key-code-50 black-key active-key" data-key-code="50" d="M121.551724,32.03118 C121.551724,34.35579 119.673103,36.22914 117.357931,36.22914 L89.1641379,36.22914 C86.8448276,36.22914 84.9682759,34.35579 84.9682759,32.03118 L84.9682759,6.04854 C84.9682759,3.73221 86.8448276,1.85058 89.1641379,1.85058 L117.357931,1.85058 C119.673103,1.85058 121.551724,3.73221 121.551724,6.04854 L121.551724,32.03118 L121.551724,32.03118 Z"></path>
<path id="key-3" class="computer-key key-code-51 black-key active-key" data-key-code="51" d="M163.311724,32.03118 C163.311724,34.35579 161.431034,36.22914 159.111724,36.22914 L130.922069,36.22914 C128.602759,36.22914 126.724138,34.35579 126.724138,32.03118 L126.724138,6.04854 C126.724138,3.73221 128.602759,1.85058 130.922069,1.85058 L159.111724,1.85058 C161.431034,1.85058 163.311724,3.73221 163.311724,6.04854 L163.311724,32.03118 L163.311724,32.03118 Z"></path>
<path id="key-4" class="computer-key key-code-52" data-key-code="52" d="M205.069655,32.03118 C205.069655,34.35579 203.191034,36.22914 200.871724,36.22914 L172.677931,36.22914 C170.362759,36.22914 168.484138,34.35579 168.484138,32.03118 L168.484138,6.04854 C168.484138,3.73221 170.362759,1.85058 172.677931,1.85058 L200.871724,1.85058 C203.191034,1.85058 205.069655,3.73221 205.069655,6.04854 L205.069655,32.03118 L205.069655,32.03118 Z"></path>
<path id="key-5" class="computer-key key-code-53 black-key active-key" data-key-code="53" d="M246.829655,32.03118 C246.829655,34.35579 244.951034,36.22914 242.629655,36.22914 L214.437931,36.22914 C212.116552,36.22914 210.242069,34.35579 210.242069,32.03118 L210.242069,6.04854 C210.242069,3.73221 212.116552,1.85058 214.437931,1.85058 L242.629655,1.85058 C244.951034,1.85058 246.829655,3.73221 246.829655,6.04854 L246.829655,32.03118 L246.829655,32.03118 Z"></path>
<path id="key-6" class="computer-key key-code-54 black-key active-key" data-key-code="54" d="M288.583448,32.03118 C288.583448,34.35579 286.704828,36.22914 284.389655,36.22914 L256.195862,36.22914 C253.876552,36.22914 252.002069,34.35579 252.002069,32.03118 L252.002069,6.04854 C252.002069,3.73221 253.876552,1.85058 256.195862,1.85058 L284.389655,1.85058 C286.704828,1.85058 288.583448,3.73221 288.583448,6.04854 L288.583448,32.03118 L288.583448,32.03118 Z"></path>
<path id="key-7" class="computer-key key-code-55 black-key active-key" data-key-code="55" d="M330.343448,32.03118 C330.343448,34.35579 328.464828,36.22914 326.145517,36.22914 L297.955862,36.22914 C295.636552,36.22914 293.755862,34.35579 293.755862,32.03118 L293.755862,6.04854 C293.755862,3.73221 295.636552,1.85058 297.955862,1.85058 L326.145517,1.85058 C328.464828,1.85058 330.343448,3.73221 330.343448,6.04854 L330.343448,32.03118 L330.343448,32.03118 Z"></path>
<path id="key-8" class="computer-key key-code-56" data-key-code="56" d="M372.103448,32.03118 C372.103448,34.35579 370.222759,36.22914 367.903448,36.22914 L339.709655,36.22914 C337.394483,36.22914 335.515862,34.35579 335.515862,32.03118 L335.515862,6.04854 C335.515862,3.73221 337.394483,1.85058 339.709655,1.85058 L367.903448,1.85058 C370.222759,1.85058 372.103448,3.73221 372.103448,6.04854 L372.103448,32.03118 L372.103448,32.03118 Z"></path>
<path id="key-9" class="computer-key key-code-57" data-key-code="57" d="M413.861379,32.03118 C413.861379,34.35579 411.982759,36.22914 409.663448,36.22914 L381.469655,36.22914 C379.150345,36.22914 377.275862,34.35579 377.275862,32.03118 L377.275862,6.04854 C377.275862,3.73221 379.150345,1.85058 381.469655,1.85058 L409.663448,1.85058 C411.982759,1.85058 413.861379,3.73221 413.861379,6.04854 L413.861379,32.03118 L413.861379,32.03118 Z"></path>
<path id="key-0" class="computer-key key-code-48" data-key-code="48" d="M455.617241,32.03118 C455.617241,34.35579 453.738621,36.22914 451.423448,36.22914 L423.229655,36.22914 C420.908276,36.22914 419.033793,34.35579 419.033793,32.03118 L419.033793,6.04854 C419.033793,3.73221 420.908276,1.85058 423.229655,1.85058 L451.423448,1.85058 C453.738621,1.85058 455.617241,3.73221 455.617241,6.04854 L455.617241,32.03118 L455.617241,32.03118 Z"></path>
<path id="key-hyphen" class="computer-key key-code-173" data-key-code="173" d="M497.375172,32.03118 C497.375172,34.35579 495.496552,36.22914 493.177241,36.22914 L464.987586,36.22914 C462.668276,36.22914 460.789655,34.35579 460.789655,32.03118 L460.789655,6.04854 C460.789655,3.73221 462.668276,1.85058 464.987586,1.85058 L493.177241,1.85058 C495.496552,1.85058 497.375172,3.73221 497.375172,6.04854 L497.375172,32.03118 L497.375172,32.03118 Z"></path>
<path id="key-equal" class="computer-key key-code-61" data-key-code="61" d="M539.135172,32.03118 C539.135172,34.35579 537.256552,36.22914 534.937241,36.22914 L506.743448,36.22914 C504.424138,36.22914 502.547586,34.35579 502.547586,32.03118 L502.547586,6.04854 C502.547586,3.73221 504.424138,1.85058 506.743448,1.85058 L534.937241,1.85058 C537.256552,1.85058 539.135172,3.73221 539.135172,6.04854 L539.135172,32.03118 L539.135172,32.03118 Z"></path>
<path id="key-q" class="computer-key key-code-81 white-key active-key" data-key-code="81" d="M99.1696552,72.91368 C99.1696552,75.23829 97.2889655,77.11164 94.9696552,77.11164 L66.78,77.11164 C64.4606897,77.11164 62.582069,75.23829 62.582069,72.91368 L62.582069,46.93104 C62.582069,44.61471 64.4606897,42.73308 66.78,42.73308 L94.9696552,42.73308 C97.2889655,42.73308 99.1696552,44.61471 99.1696552,46.93104 L99.1696552,72.91368 L99.1696552,72.91368 Z"></path>
<path id="key-w" class="computer-key key-code-87 white-key active-key" data-key-code="87" d="M140.927586,72.91368 C140.927586,75.23829 139.048966,77.11164 136.729655,77.11164 L108.535862,77.11164 C106.22069,77.11164 104.342069,75.23829 104.342069,72.91368 L104.342069,46.93104 C104.342069,44.61471 106.22069,42.73308 108.535862,42.73308 L136.729655,42.73308 C139.048966,42.73308 140.927586,44.61471 140.927586,46.93104 L140.927586,72.91368 L140.927586,72.91368 Z"></path>
<path id="key-e" class="computer-key key-code-69 white-key active-key" data-key-code="69" d="M182.687586,72.91368 C182.687586,75.23829 180.808966,77.11164 178.489655,77.11164 L150.295862,77.11164 C147.974483,77.11164 146.1,75.23829 146.1,72.91368 L146.1,46.93104 C146.1,44.61471 147.974483,42.73308 150.295862,42.73308 L178.489655,42.73308 C180.808966,42.73308 182.687586,44.61471 182.687586,46.93104 L182.687586,72.91368 L182.687586,72.91368 Z"></path>
<path id="key-r" class="computer-key key-code-82 white-key active-key" data-key-code="82" d="M224.441379,72.91368 C224.441379,75.23829 222.562759,77.11164 220.247586,77.11164 L192.053793,77.11164 C189.734483,77.11164 187.86,75.23829 187.86,72.91368 L187.86,46.93104 C187.86,44.61471 189.734483,42.73308 192.053793,42.73308 L220.247586,42.73308 C222.562759,42.73308 224.441379,44.61471 224.441379,46.93104 L224.441379,72.91368 L224.441379,72.91368 Z"></path>
<path id="key-t" class="computer-key key-code-84 white-key active-key" data-key-code="84" d="M266.201379,72.91368 C266.201379,75.23829 264.322759,77.11164 262.003448,77.11164 L233.813793,77.11164 C231.494483,77.11164 229.613793,75.23829 229.613793,72.91368 L229.613793,46.93104 C229.613793,44.61471 231.494483,42.73308 233.813793,42.73308 L262.003448,42.73308 C264.322759,42.73308 266.201379,44.61471 266.201379,46.93104 L266.201379,72.91368 L266.201379,72.91368 Z"></path>
<path id="key-y" class="computer-key key-code-89 white-key active-key" data-key-code="89" d="M307.961379,72.91368 C307.961379,75.23829 306.08069,77.11164 303.761379,77.11164 L275.567586,77.11164 C273.252414,77.11164 271.373793,75.23829 271.373793,72.91368 L271.373793,46.93104 C271.373793,44.61471 273.252414,42.73308 275.567586,42.73308 L303.761379,42.73308 C306.08069,42.73308 307.961379,44.61471 307.961379,46.93104 L307.961379,72.91368 L307.961379,72.91368 Z"></path>
<path id="key-u" class="computer-key key-code-85 white-key active-key" data-key-code="85" d="M349.71931,72.91368 C349.71931,75.23829 347.84069,77.11164 345.521379,77.11164 L317.327586,77.11164 C315.008276,77.11164 313.133793,75.23829 313.133793,72.91368 L313.133793,46.93104 C313.133793,44.61471 315.008276,42.73308 317.327586,42.73308 L345.521379,42.73308 C347.84069,42.73308 349.71931,44.61471 349.71931,46.93104 L349.71931,72.91368 L349.71931,72.91368 Z"></path>
<path id="key-i" class="computer-key key-code-73 white-key active-key" data-key-code="73" d="M391.475172,72.91368 C391.475172,75.23829 389.596552,77.11164 387.281379,77.11164 L359.087586,77.11164 C356.768276,77.11164 354.891724,75.23829 354.891724,72.91368 L354.891724,46.93104 C354.891724,44.61471 356.768276,42.73308 359.087586,42.73308 L387.281379,42.73308 C389.596552,42.73308 391.475172,44.61471 391.475172,46.93104 L391.475172,72.91368 L391.475172,72.91368 Z"></path>
<path id="key-o" class="computer-key key-code-79" data-key-code="79" d="M433.233103,72.91368 C433.233103,75.23829 431.354483,77.11164 429.035172,77.11164 L400.845517,77.11164 C398.526207,77.11164 396.647586,75.23829 396.647586,72.91368 L396.647586,46.93104 C396.647586,44.61471 398.526207,42.73308 400.845517,42.73308 L429.035172,42.73308 C431.354483,42.73308 433.233103,44.61471 433.233103,46.93104 L433.233103,72.91368 L433.233103,72.91368 Z"></path>
<path id="key-p" class="computer-key key-code-80" data-key-code="80" d="M474.993103,72.91368 C474.993103,75.23829 473.114483,77.11164 470.795172,77.11164 L442.601379,77.11164 C440.286207,77.11164 438.405517,75.23829 438.405517,72.91368 L438.405517,46.93104 C438.405517,44.61471 440.286207,42.73308 442.601379,42.73308 L470.795172,42.73308 C473.114483,42.73308 474.993103,44.61471 474.993103,46.93104 L474.993103,72.91368 L474.993103,72.91368 Z"></path>
<path id="key-opening-square-bracket" class="computer-key key-code-219" data-key-code="219" d="M516.748966,72.91368 C516.748966,75.23829 514.870345,77.11164 512.553103,77.11164 L484.35931,77.11164 C482.04,77.11164 480.165517,75.23829 480.165517,72.91368 L480.165517,46.93104 C480.165517,44.61471 482.04,42.73308 484.35931,42.73308 L512.553103,42.73308 C514.870345,42.73308 516.748966,44.61471 516.748966,46.93104 L516.748966,72.91368 L516.748966,72.91368 Z"></path>
<path id="key-closing-square-bracket" class="computer-key key-code-221" data-key-code="221" d="M558.506897,72.91368 C558.506897,75.23829 556.628276,77.11164 554.308966,77.11164 L526.11931,77.11164 C523.8,77.11164 521.921379,75.23829 521.921379,72.91368 L521.921379,46.93104 C521.921379,44.61471 523.8,42.73308 526.11931,42.73308 L554.308966,42.73308 C556.628276,42.73308 558.506897,44.61471 558.506897,46.93104 L558.506897,72.91368 L558.506897,72.91368 Z"></path>
<path id="key-back-slash" class="computer-key key-code-220" data-key-code="220" d="M599.542759,72.91368 C599.542759,75.23829 597.664138,77.11164 595.344828,77.11164 L567.151034,77.11164 C564.831724,77.11164 562.957241,75.23829 562.957241,72.91368 L562.957241,46.93104 C562.957241,44.61471 564.831724,42.73308 567.151034,42.73308 L595.344828,42.73308 C597.664138,42.73308 599.542759,44.61471 599.542759,46.93104 L599.542759,72.91368 L599.542759,72.91368 Z"></path>
<path id="key-a" class="computer-key key-code-65" data-key-code="65" d="M110.031724,113.79618 C110.031724,116.12079 108.151034,117.99414 105.831724,117.99414 L77.642069,117.99414 C75.3227586,117.99414 73.4441379,116.12079 73.4441379,113.79618 L73.4441379,87.81354 C73.4441379,85.49721 75.3227586,83.61558 77.642069,83.61558 L105.831724,83.61558 C108.151034,83.61558 110.031724,85.49721 110.031724,87.81354 L110.031724,113.79618 L110.031724,113.79618 Z"></path>
<path id="key-s" class="computer-key key-code-83 black-key active-key" data-key-code="83" d="M151.789655,113.79618 C151.789655,116.12079 149.911034,117.99414 147.591724,117.99414 L119.397931,117.99414 C117.082759,117.99414 115.204138,116.12079 115.204138,113.79618 L115.204138,87.81354 C115.204138,85.49721 117.082759,83.61558 119.397931,83.61558 L147.591724,83.61558 C149.911034,83.61558 151.789655,85.49721 151.789655,87.81354 L151.789655,113.79618 L151.789655,113.79618 Z"></path>
<path id="key-d" class="computer-key key-code-68 black-key active-key" data-key-code="68" d="M193.549655,113.79618 C193.549655,116.12079 191.671034,117.99414 189.351724,117.99414 L161.157931,117.99414 C158.836552,117.99414 156.962069,116.12079 156.962069,113.79618 L156.962069,87.81354 C156.962069,85.49721 158.836552,83.61558 161.157931,83.61558 L189.351724,83.61558 C191.671034,83.61558 193.549655,85.49721 193.549655,87.81354 L193.549655,113.79618 L193.549655,113.79618 Z"></path>
<path id="key-f" class="computer-key key-code-70" data-key-code="70" d="M235.303448,113.79618 C235.303448,116.12079 233.424828,117.99414 231.109655,117.99414 L202.915862,117.99414 C200.596552,117.99414 198.722069,116.12079 198.722069,113.79618 L198.722069,87.81354 C198.722069,85.49721 200.596552,83.61558 202.915862,83.61558 L231.109655,83.61558 C233.424828,83.61558 235.303448,85.49721 235.303448,87.81354 L235.303448,113.79618 L235.303448,113.79618 Z"></path>
<path id="key-g" class="computer-key key-code-71 black-key active-key" data-key-code="71" d="M277.063448,113.79618 C277.063448,116.12079 275.184828,117.99414 272.865517,117.99414 L244.675862,117.99414 C242.356552,117.99414 240.475862,116.12079 240.475862,113.79618 L240.475862,87.81354 C240.475862,85.49721 242.356552,83.61558 244.675862,83.61558 L272.865517,83.61558 C275.184828,83.61558 277.063448,85.49721 277.063448,87.81354 L277.063448,113.79618 L277.063448,113.79618 Z"></path>
<path id="key-h" class="computer-key key-code-72 black-key active-key" data-key-code="72" d="M318.823448,113.79618 C318.823448,116.12079 316.942759,117.99414 314.623448,117.99414 L286.429655,117.99414 C284.114483,117.99414 282.235862,116.12079 282.235862,113.79618 L282.235862,87.81354 C282.235862,85.49721 284.114483,83.61558 286.429655,83.61558 L314.623448,83.61558 C316.942759,83.61558 318.823448,85.49721 318.823448,87.81354 L318.823448,113.79618 L318.823448,113.79618 Z"></path>
<path id="key-j" class="computer-key key-code-74 black-key active-key" data-key-code="74" d="M360.581379,113.79618 C360.581379,116.12079 358.702759,117.99414 356.383448,117.99414 L328.189655,117.99414 C325.870345,117.99414 323.995862,116.12079 323.995862,113.79618 L323.995862,87.81354 C323.995862,85.49721 325.870345,83.61558 328.189655,83.61558 L356.383448,83.61558 C358.702759,83.61558 360.581379,85.49721 360.581379,87.81354 L360.581379,113.79618 L360.581379,113.79618 Z"></path>
<path id="key-k" class="computer-key key-code-75" data-key-code="75" d="M402.337241,113.79618 C402.337241,116.12079 400.458621,117.99414 398.143448,117.99414 L369.949655,117.99414 C367.630345,117.99414 365.753793,116.12079 365.753793,113.79618 L365.753793,87.81354 C365.753793,85.49721 367.630345,83.61558 369.949655,83.61558 L398.143448,83.61558 C400.458621,83.61558 402.337241,85.49721 402.337241,87.81354 L402.337241,113.79618 L402.337241,113.79618 Z"></path>
<path id="key-l" class="computer-key key-code-76" data-key-code="76" d="M444.095172,113.79618 C444.095172,116.12079 442.216552,117.99414 439.897241,117.99414 L411.707586,117.99414 C409.388276,117.99414 407.509655,116.12079 407.509655,113.79618 L407.509655,87.81354 C407.509655,85.49721 409.388276,83.61558 411.707586,83.61558 L439.897241,83.61558 C442.216552,83.61558 444.095172,85.49721 444.095172,87.81354 L444.095172,113.79618 L444.095172,113.79618 Z"></path>
<path id="key-semicolon" class="computer-key key-code-59" data-key-code="59" d="M485.855172,113.79618 C485.855172,116.12079 483.976552,117.99414 481.657241,117.99414 L453.463448,117.99414 C451.148276,117.99414 449.267586,116.12079 449.267586,113.79618 L449.267586,87.81354 C449.267586,85.49721 451.148276,83.61558 453.463448,83.61558 L481.657241,83.61558 C483.976552,83.61558 485.855172,85.49721 485.855172,87.81354 L485.855172,113.79618 L485.855172,113.79618 Z"></path>
<path id="key-quote" class="computer-key key-code-222" data-key-code="222" d="M527.611034,113.79618 C527.611034,116.12079 525.732414,117.99414 523.415172,117.99414 L495.221379,117.99414 C492.902069,117.99414 491.027586,116.12079 491.027586,113.79618 L491.027586,87.81354 C491.027586,85.49721 492.902069,83.61558 495.221379,83.61558 L523.415172,83.61558 C525.732414,83.61558 527.611034,85.49721 527.611034,87.81354 L527.611034,113.79618 L527.611034,113.79618 Z"></path>
<path id="key-z" class="computer-key key-code-90 white-key active-key" data-key-code="90" d="M129.357931,154.67868 C129.357931,157.00329 127.47931,158.87664 125.16,158.87664 L96.9662069,158.87664 C94.6468966,158.87664 92.7724138,157.00329 92.7724138,154.67868 L92.7724138,128.69604 C92.7724138,126.37971 94.6468966,124.49808 96.9662069,124.49808 L125.16,124.49808 C127.47931,124.49808 129.357931,126.37971 129.357931,128.69604 L129.357931,154.67868 L129.357931,154.67868 Z"></path>
<path id="key-x" class="computer-key key-code-88 white-key active-key" data-key-code="88" d="M171.113793,154.67868 C171.113793,157.00329 169.235172,158.87664 166.92,158.87664 L138.726207,158.87664 C136.406897,158.87664 134.530345,157.00329 134.530345,154.67868 L134.530345,128.69604 C134.530345,126.37971 136.406897,124.49808 138.726207,124.49808 L166.92,124.49808 C169.235172,124.49808 171.113793,126.37971 171.113793,128.69604 L171.113793,154.67868 L171.113793,154.67868 Z"></path>
<path id="key-c" class="computer-key key-code-67 white-key active-key" data-key-code="67" d="M212.873793,154.67868 C212.873793,157.00329 210.993103,158.87664 208.673793,158.87664 L180.484138,158.87664 C178.164828,158.87664 176.286207,157.00329 176.286207,154.67868 L176.286207,128.69604 C176.286207,126.37971 178.164828,124.49808 180.484138,124.49808 L208.673793,124.49808 C210.993103,124.49808 212.873793,126.37971 212.873793,128.69604 L212.873793,154.67868 L212.873793,154.67868 Z"></path>
<path id="key-v" class="computer-key key-code-86 white-key active-key" data-key-code="86" d="M254.631724,154.67868 C254.631724,157.00329 252.753103,158.87664 250.433793,158.87664 L222.24,158.87664 C219.924828,158.87664 218.046207,157.00329 218.046207,154.67868 L218.046207,128.69604 C218.046207,126.37971 219.924828,124.49808 222.24,124.49808 L250.433793,124.49808 C252.753103,124.49808 254.631724,126.37971 254.631724,128.69604 L254.631724,154.67868 L254.631724,154.67868 Z"></path>
<path id="key-b" class="computer-key key-code-66 white-key active-key" data-key-code="66" d="M296.391724,154.67868 C296.391724,157.00329 294.513103,158.87664 292.193793,158.87664 L264,158.87664 C261.68069,158.87664 259.804138,157.00329 259.804138,154.67868 L259.804138,128.69604 C259.804138,126.37971 261.68069,124.49808 264,124.49808 L292.193793,124.49808 C294.513103,124.49808 296.391724,126.37971 296.391724,128.69604 L296.391724,154.67868 L296.391724,154.67868 Z"></path>
<path id="key-n" class="computer-key key-code-78 white-key active-key" data-key-code="78" d="M338.147586,154.67868 C338.147586,157.00329 336.266897,158.87664 333.951724,158.87664 L305.757931,158.87664 C303.438621,158.87664 301.564138,157.00329 301.564138,154.67868 L301.564138,128.69604 C301.564138,126.37971 303.438621,124.49808 305.757931,124.49808 L333.951724,124.49808 C336.266897,124.49808 338.147586,126.37971 338.147586,128.69604 L338.147586,154.67868 L338.147586,154.67868 Z"></path>
<path id="key-m" class="computer-key key-code-77 white-key active-key" data-key-code="77" d="M379.905517,154.67868 C379.905517,157.00329 378.026897,158.87664 375.707586,158.87664 L347.517931,158.87664 C345.198621,158.87664 343.32,157.00329 343.32,154.67868 L343.32,128.69604 C343.32,126.37971 345.198621,124.49808 347.517931,124.49808 L375.707586,124.49808 C378.026897,124.49808 379.905517,126.37971 379.905517,128.69604 L379.905517,154.67868 L379.905517,154.67868 Z"></path>
<path id="key-comma" class="computer-key key-code-188 white-key active-key" data-key-code="188" d="M421.665517,154.67868 C421.665517,157.00329 419.784828,158.87664 417.465517,158.87664 L389.271724,158.87664 C386.956552,158.87664 385.077931,157.00329 385.077931,154.67868 L385.077931,128.69604 C385.077931,126.37971 386.956552,124.49808 389.271724,124.49808 L417.465517,124.49808 C419.784828,124.49808 421.665517,126.37971 421.665517,128.69604 L421.665517,154.67868 L421.665517,154.67868 Z"></path>
<path id="key-period" class="computer-key key-code-190" data-key-code="190" d="M463.423448,154.67868 C463.423448,157.00329 461.544828,158.87664 459.225517,158.87664 L431.031724,158.87664 C428.712414,158.87664 426.837931,157.00329 426.837931,154.67868 L426.837931,128.69604 C426.837931,126.37971 428.712414,124.49808 431.031724,124.49808 L459.225517,124.49808 C461.544828,124.49808 463.423448,126.37971 463.423448,128.69604 L463.423448,154.67868 L463.423448,154.67868 Z"></path>
<path id="key-forward-slash" class="computer-key key-code-191" data-key-code="191" d="M505.17931,154.67868 C505.17931,157.00329 503.30069,158.87664 500.981379,158.87664 L472.791724,158.87664 C470.472414,158.87664 468.595862,157.00329 468.595862,154.67868 L468.595862,128.69604 C468.595862,126.37971 470.472414,124.49808 472.791724,124.49808 L500.981379,124.49808 C503.30069,124.49808 505.17931,126.37971 505.17931,128.69604 L505.17931,154.67868 L505.17931,154.67868 Z"></path>
<path id="key-tab" class="computer-key key-code-9" data-key-code="9" d="M59.4496552,72.91368 C59.4496552,75.23829 57.5710345,77.11164 55.2517241,77.11164 L6.24413793,77.11164 C3.92482759,77.11164 2.04413793,75.23829 2.04413793,72.91368 L2.04413793,46.93104 C2.04413793,44.61471 3.92482759,42.73308 6.24413793,42.73308 L55.2517241,42.73308 C57.5710345,42.73308 59.4496552,44.61471 59.4496552,46.93104 L59.4496552,72.91368 L59.4496552,72.91368 Z"></path>
<path id="key-caps-lock" class="computer-key" d="M70.2124138,113.79618 C70.2124138,116.12079 68.3317241,117.99414 66.0165517,117.99414 L5.88,117.99414 C3.56068966,117.99414 1.68413793,116.12079 1.68413793,113.79618 L1.68413793,87.81354 C1.68413793,85.49721 3.56068966,83.61558 5.88,83.61558 L66.0165517,83.61558 C68.3317241,83.61558 70.2124138,85.49721 70.2124138,87.81354 L70.2124138,113.79618 L70.2124138,113.79618 Z"></path>
<path id="key-return" class="computer-key key-code-13" data-key-code="13" d="M599.542759,113.79618 C599.542759,116.12079 597.664138,117.99414 595.344828,117.99414 L535.212414,117.99414 C532.891034,117.99414 531.012414,116.12079 531.012414,113.79618 L531.012414,87.81354 C531.012414,85.49721 532.891034,83.61558 535.212414,83.61558 L595.344828,83.61558 C597.664138,83.61558 599.542759,85.49721 599.542759,87.81354 L599.542759,113.79618 L599.542759,113.79618 Z"></path>
<path id="key-delete" class="computer-key key-code-8" data-key-code="8" d="M599.542759,32.03118 C599.542759,34.35579 597.664138,36.22914 595.344828,36.22914 L546.337241,36.22914 C544.015862,36.22914 542.137241,34.35579 542.137241,32.03118 L542.137241,6.04854 C542.137241,3.73221 544.015862,1.85058 546.337241,1.85058 L595.344828,1.85058 C597.664138,1.85058 599.542759,3.73221 599.542759,6.04854 L599.542759,32.03118 L599.542759,32.03118 Z"></path>
<path id="key-left-shift" class="computer-key key-code-16" data-key-code="16" d="M90.3186207,154.67868 C90.3186207,157.00329 88.44,158.87664 86.1206897,158.87664 L5.88,158.87664 C3.56068966,158.87664 1.68413793,157.00329 1.68413793,154.67868 L1.68413793,128.69604 C1.68413793,126.37971 3.56068966,124.49808 5.88,124.49808 L86.1206897,124.49808 C88.44,124.49808 90.3186207,126.37971 90.3186207,128.69604 L90.3186207,154.67868 L90.3186207,154.67868 Z"></path>
<path id="key-right-shift" class="computer-key key-code-16" data-key-code="16" d="M599.542759,154.67868 C599.542759,157.00329 597.664138,158.87664 595.344828,158.87664 L515.104138,158.87664 C512.784828,158.87664 510.908276,157.00329 510.908276,154.67868 L510.908276,128.69604 C510.908276,126.37971 512.784828,124.49808 515.104138,124.49808 L595.344828,124.49808 C597.664138,124.49808 599.542759,126.37971 599.542759,128.69604 L599.542759,154.67868 L599.542759,154.67868 Z"></path>
<path id="key-left-control" class="computer-key key-code-17" data-key-code="17" d="M59.0834483,202.0113 C59.0834483,204.33591 57.2027586,206.21133 54.8875862,206.21133 L5.88,206.21133 C3.56068966,206.21133 1.68413793,204.33591 1.68413793,202.0113 L1.68413793,169.07346 C1.68413793,166.75713 3.56068966,164.8755 5.88,164.8755 L54.8875862,164.8755 C57.2027586,164.8755 59.0834483,166.75713 59.0834483,169.07346 L59.0834483,202.0113 L59.0834483,202.0113 Z"></path>
<path id="key-left-option" class="computer-key key-code-18" data-key-code="18" d="M111.066207,202.0113 C111.066207,204.33591 109.185517,206.21133 106.866207,206.21133 L67.0841379,206.21133 C64.7648276,206.21133 62.8903448,204.33591 62.8903448,202.0113 L62.8903448,169.07346 C62.8903448,166.75713 64.7648276,164.8755 67.0841379,164.8755 L106.866207,164.8755 C109.185517,164.8755 111.066207,166.75713 111.066207,169.07346 L111.066207,202.0113 L111.066207,202.0113 Z"></path>
<path id="key-left-command" class="computer-key key-code-224" data-key-code="224" d="M172.601379,202.0113 C172.601379,204.33591 170.722759,206.21133 168.405517,206.21133 L119.402069,206.21133 C117.082759,206.21133 115.204138,204.33591 115.204138,202.0113 L115.204138,169.07346 C115.204138,166.75713 117.082759,164.8755 119.402069,164.8755 L168.405517,164.8755 C170.722759,164.8755 172.601379,166.75713 172.601379,169.07346 L172.601379,202.0113 L172.601379,202.0113 Z"></path>
<path id="key-space" class="computer-key" d="M422.654483,202.0113 C422.654483,204.33591 420.775862,206.21133 418.46069,206.21133 L181.648966,206.21133 C179.329655,206.21133 177.451034,204.33591 177.451034,202.0113 L177.451034,169.07346 C177.451034,166.75713 179.329655,164.8755 181.648966,164.8755 L418.46069,164.8755 C420.775862,164.8755 422.654483,166.75713 422.654483,169.07346 L422.654483,202.0113 L422.654483,202.0113 Z"></path>
<path id="key-right-command" class="computer-key key-code-224" data-key-code="224" d="M484.315862,202.0113 C484.315862,204.33591 482.437241,206.21133 480.122069,206.21133 L431.116552,206.21133 C428.797241,206.21133 426.918621,204.33591 426.918621,202.0113 L426.918621,169.07346 C426.918621,166.75713 428.797241,164.8755 431.116552,164.8755 L480.122069,164.8755 C482.437241,164.8755 484.315862,166.75713 484.315862,169.07346 L484.315862,202.0113 L484.315862,202.0113 Z"></path>
<path id="key-right-option" class="computer-key key-code-18" data-key-code="18" d="M536.625517,202.0113 C536.625517,204.33591 534.746897,206.21133 532.427586,206.21133 L492.643448,206.21133 C490.324138,206.21133 488.449655,204.33591 488.449655,202.0113 L488.449655,169.07346 C488.449655,166.75713 490.324138,164.8755 492.643448,164.8755 L532.427586,164.8755 C534.746897,164.8755 536.625517,166.75713 536.625517,169.07346 L536.625517,202.0113 L536.625517,202.0113 Z"></path>
<path id="key-right-control" class="computer-key key-code-17" data-key-code="17" d="M599.542759,202.0113 C599.542759,204.33591 597.664138,206.21133 595.344828,206.21133 L546.33931,206.21133 C544.02,206.21133 542.145517,204.33591 542.145517,202.0113 L542.145517,169.07346 C542.145517,166.75713 544.02,164.8755 546.33931,164.8755 L595.344828,164.8755 C597.664138,164.8755 599.542759,166.75713 599.542759,169.07346 L599.542759,202.0113 L599.542759,202.0113 Z"></path>
</g>
</svg>
</div>
<footer>
<p>If you enjoyed this, check out <a href="http://github.com/stevekinney/audiophonic">the source code on Github</a> or <a href="http://twitter.com/stevekinney">follow Steve on Twitter</a>.
</footer>
</div>
<script src="bundle.js"></script>
</body>
</html>