Its Monday so hopefully I can bring even just a little Joy into your life today! 😛
Mondays are sort of my Friday in the sense that I’ve tied up all lose ends from the previous week, updated my clients on their projects or sites, fed Xavier countless times (and changed almost as many diapers) and generally my 80ish hour work week is coming to a close, though I don’t have long to ‘rest on my laurels‘, its back to the grind this evening but right now I owe you all a project don’t I? 😉
As you may know I am funding this little experiment with the proceeds I get on Patreon and as such I am limited sometimes in what I can do for you guys in some ways. This does provide me with a nice challenge every week to bring you something interesting that also costs me nothing and generally this has not been an issue since most of the projects we’ve done together have been “back-end” code focusing on PHP and C# with the exception of the Magic 8 Ball post I published in February.
This post will again showcase a “front-end” project that could run right here on this page save for the fact that I am currently using a free WordPress.com account instead of a paid account with more features or more preferentially something like a VPS which will let us do basically whatever we wanted. Now of course there are other options and when it’s time I will weigh the options and ensure that we get the most bang for our buck (meaning the highest marginal utility for the lowest marginal cost) but until then, most unfortunately WordPress.com wont let me embed any functional code on these pages and that includes JavaScript.
Additionally, there are times when you will see ads on my content. I get nothing from them and I cannot remove them. So, if you like these posts and would like MORE out of each then head over to Patreon and drop a buck or more in my hat every month and you will be making a meaningful contribution to growing the quality of my content and at only $12 a year that’s a huge bargain!
So with that, lets to a little Q&A on today’s project.
Q: Why a Piano/Keyboard?
A: Cause its cool! Next question. 😛
Q: Why is there is no PHP in this post?
A: There is actually a tiny amount of PHP in this project which I use to switch between the SVG and the PNG but outside of that there is no PHP tied into the core of this project. I honestly thought about it but I wanted to keep it simple. Building a music playing neural network on top of the piano did cross my mind but again, this post is about showing that we can build something entirely awesome without it also being overly complex so… I nixed it. Maybe some other time. 😉
Q: Why do the same project using SVG and PNG?
A: The first and most simplest reason is to demonstrate the principal of there being more than one way to do something, but also because there are differences. The SVG uses inline hyper links wrapped around the <g> (groups) in the SVG whereas the PNG uses an image map with the Javascript instead attaching to the link in the map and not the image itself.
Of course the SVG will scale flawlessly on any size screen and the PNG is shorter to code out but will get pixelated the more you zoom in or resize it to be larger.
Playable Piano / Keyboard
This could be playable! Support me on Patreon so projects like this can be previewed.

Live Preview
You can preview a live version of this project over here
The Code
<!DOCTYPE html>
<html>
<head>
<title>Playable SVG & PNG Keyboard</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
background-color: #222222;
}
h1,p {
color:white;
}
.centered {
margin: 0 auto;
text-align: left;
width: 600px;
}
</style>
</head>
<body>
<audio id="C-Audio"><source src="audio/C.wav" type="audio/wav">
Your browser doesn't support the audio element.
</audio>
<audio id="D-Audio"><source src="audio/D.wav" type="audio/wav"></audio>
<audio id="E-Audio"><source src="audio/E.wav" type="audio/wav"></audio>
<audio id="F-Audio"><source src="audio/F.wav" type="audio/wav"></audio>
<audio id="G-Audio"><source src="audio/G.wav" type="audio/wav"></audio>
<audio id="A-Audio"><source src="audio/A.wav" type="audio/wav"></audio>
<audio id="B-Audio"><source src="audio/B.wav" type="audio/wav"></audio>
<audio id="C-Sharp-Audio"><source src="audio/C-Sharp.wav" type="audio/wav"></audio>
<audio id="D-Sharp-Audio"><source src="audio/D-Sharp.wav" type="audio/wav"></audio>
<audio id="F-Sharp-Audio"><source src="audio/F-Sharp.wav" type="audio/wav"></audio>
<audio id="G-Sharp-Audio"><source src="audio/G-Sharp.wav" type="audio/wav"></audio>
<audio id="A-Sharp-Audio"><source src="audio/A-Sharp.wav" type="audio/wav"></audio>
<?php
if(isset($_POST['method'])){
$method = $_POST['method'];
}
else{
$method = "svg";
}
?>
<div class="centered">
<?php if($method == "svg"){ ?>
<h1>SVG</h1>
<?php } elseif($method == "png"){ ?>
<h1>PNG</h1>
<?php } ?>
<p>Click the keys to play a little tune!</p>
<form action="#" method="POST">
<select id="method" name="method" onchange="this.form.submit()">
<option value="svg" <?php if($method == "svg"){ echo "selected"; }?>>SVG - Inline Hyperlinks</option>
<option value="png" <?php if($method == "png"){ echo "selected"; }?>>PNG - ImageMap Hyperlinks</option>
</select>
</form>
<?php if($method == "svg"){ ?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="600"
height="500"
viewBox="0 0 158.75 132.29167"
version="1.1"
id="geekgirljoys-playable-keyboard"
inkscape:version="0.92.0 r15299"
sodipodi:docname="keyboard.svg"
inkscape:export-filename="C:\Users\Joy\Desktop\Piano\New\piano.png"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300"
style="enable-background:new">
<defs
id="defs12918">
<linearGradient
inkscape:collect="always"
id="linearGradient5259">
<stop
style="stop-color:#003380;stop-opacity:1;"
offset="0"
id="stop5255" />
<stop
style="stop-color:#003380;stop-opacity:0;"
offset="1"
id="stop5257" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient5021">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop5017" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop5019" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4664">
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="0"
id="stop4660" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop4662" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4614">
<stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4610" />
<stop
style="stop-color:#000000;stop-opacity:0;"
offset="1"
id="stop4612" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient15315-5">
<stop
style="stop-color:#f9f9f9;stop-opacity:1;"
offset="0"
id="stop15311" />
<stop
style="stop-color:#000000;stop-opacity:0.79605263"
offset="1"
id="stop15313" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient15157">
<stop
style="stop-color:#333333;stop-opacity:1"
offset="0"
id="stop15153" />
<stop
id="stop15161"
offset="0.5"
style="stop-color:#191919;stop-opacity:1;" />
<stop
style="stop-color:#333333;stop-opacity:1"
offset="1"
id="stop15155" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient15157"
id="linearGradient15159"
x1="79.876411"
y1="325.5043"
x2="79.886864"
y2="264.30887"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(1.3680627e-7,-79.375004)" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient15315-5"
id="radialGradient15736"
cx="38.679722"
cy="236.95551"
fx="38.679722"
fy="236.95551"
r="12.541217"
gradientTransform="matrix(5.7072155,0.26868388,-0.01027659,0.21828878,-179.63869,174.83816)"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4614"
id="radialGradient4616"
cx="85.9496"
cy="328.67267"
fx="85.9496"
fy="328.67267"
r="79.375"
gradientTransform="matrix(1.7919596,0.01649915,-8.0047577e-4,0.08693941,-62.780617,263.66084)"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient15315-5"
id="radialGradient4634"
cx="77.359444"
cy="176.91103"
fx="77.359444"
fy="176.91103"
r="25.082434"
gradientTransform="matrix(1.3135871,-0.1191492,0.02348472,0.25891276,-28.413636,140.32382)"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4664"
id="radialGradient4666"
cx="13.091763"
cy="235.10512"
fx="13.091763"
fy="235.10512"
r="16.501682"
gradientTransform="matrix(2.2777563,-0.10674805,0.01546079,0.32989785,-20.362998,158.94195)"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5021"
id="radialGradient5086"
cx="77.261093"
cy="169.72464"
fx="77.261093"
fy="169.72464"
r="1.3028055"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5021"
id="radialGradient5146"
cx="77.261093"
cy="169.72464"
fx="77.261093"
fy="169.72464"
r="1.3028055"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5021"
id="radialGradient5174"
cx="77.261093"
cy="169.72464"
fx="77.261093"
fy="169.72464"
r="1.3027751"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5021"
id="radialGradient5199"
cx="77.261093"
cy="169.72464"
fx="77.261093"
fy="169.72464"
r="1.3028055"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5021"
id="radialGradient5239"
cx="101.47026"
cy="169.59991"
fx="101.47026"
fy="169.59991"
r="1.3028055"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5259"
id="linearGradient5265"
x1="-3.1599205"
y1="235.1051"
x2="29.343447"
y2="235.1051"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="239.02174"
inkscape:cy="369.94902"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showguides="false"
inkscape:window-width="1680"
inkscape:window-height="987"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata12921">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-164.70831)">
<rect
style="opacity:1;fill:url(#linearGradient15159);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.31061602;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="keyboad-body"
width="158.75"
height="132.29167"
x="0.26458335"
y="164.44371"
rx="0.26458335"
ry="0.26458335"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72" />
<a href="http://geekgirljoy.wordpress.com" target="_blank" id="go-go-geekgirljoy">
<g
id="geekgirljoy-text">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
transform="matrix(1.1225043,0,0,1.1225043,5.0633408,-92.71991)"
id="geekgirljoy-bottom">
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
x="-3.5401669"
y="236.54588"
id="text5285"><tspan
sodipodi:role="line"
id="tspan15285-1"
x="-3.5401669"
y="236.54588"
style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none">GeekGirlJoy</tspan></text>
<text
id="text5283"
y="236.54588"
x="-3.5401669"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
xml:space="preserve"><tspan
style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0.70712423;stroke-miterlimit:4;stroke-dasharray:none"
y="236.54588"
x="-3.5401669"
id="tspan15307-6"
sodipodi:role="line">GeekGirlJoy</tspan></text>
</g>
<g
id="geekgirljoy-top"
transform="matrix(1.1225043,0,0,1.1225043,5.0633408,-92.71991)"
style="opacity:0.97000002;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72">
<text
id="text5247"
y="236.54588"
x="-3.5401669"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xml:space="preserve"><tspan
style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
y="236.54588"
x="-3.5401669"
id="tspan5245"
sodipodi:role="line">GeekGirlJoy</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.94135094px;line-height:1.54722679px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
x="-3.5401669"
y="236.54588"
id="text5251"><tspan
sodipodi:role="line"
id="tspan5249"
x="-3.5401669"
y="236.54588"
style="fill:url(#radialGradient4666);fill-opacity:1;stroke:#003380;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">GeekGirlJoy</tspan></text>
</g>
</g>
</a>
<rect
ry="0.26458335"
rx="0.26458335"
y="283.19775"
x="2.7755576e-017"
height="13.802217"
width="158.75"
id="shading-bottom"
style="opacity:1;fill:url(#radialGradient4616);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.39234722;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72" />
<rect
style="opacity:0.95999995;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#182943;stroke-width:4.23333339;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="keys-background"
width="96.388542"
height="95.16375"
x="30.018394"
y="189.01839"
rx="0.26458332"
ry="0.26458332"
inkscape:export-xdpi="72"
inkscape:export-ydpi="72" />
<a href="#" id="Key-B">
<g
id="white-key-b"
transform="translate(0,-0.56104268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="b-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-80.626374,-672.05687)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="b-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="b-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="b-text"
y="276.75943"
x="117.51627"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="117.51627"
id="tspan4668-6-9"
sodipodi:role="line">B</tspan></text>
</g>
</a>
<g
id="keyboard-text">
<text
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="keyboard-bottom"
y="179.79259"
x="51.96806"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.88270187px;line-height:3.09445357px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f9f9f9;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
xml:space="preserve"><tspan
style="fill:#f9f9f9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
y="179.79259"
x="51.96806"
id="tspan15285"
sodipodi:role="line">Keyboard</tspan></text>
<text
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.88270187px;line-height:3.09445357px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#radialGradient4634);fill-opacity:1;stroke:none;stroke-width:0.12377814"
x="51.96806"
y="179.79259"
id="keyboard-top"><tspan
sodipodi:role="line"
id="tspan15307"
x="51.96806"
y="179.79259"
style="fill:url(#radialGradient4634);fill-opacity:1;stroke-width:0.12377814">Keyboard</tspan></text>
</g>
<a href="#" id="Key-C" name="Key-C">
<g
id="white-key-c">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-164.17119,-672.61793)"
id="c-rect-group">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.19712651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="c-grey-rect"
width="3.9700837"
height="1.9451796"
x="59.26228"
y="289.87738"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="c-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="c-text"
y="276.7594"
x="33.866669"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.7594"
x="33.866669"
id="tspan4668"
sodipodi:role="line">C</tspan></text>
</g>
</a>
<a href="#" id="Key-D">
<g
id="white-key-d"
transform="translate(0,-0.14374268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="d-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-150.17727,-672.47417)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="d-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="d-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="d-text"
y="276.75943"
x="47.997005"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="47.997005"
id="tspan4668-6"
sodipodi:role="line">D</tspan></text>
</g>
</a>
<a href="#" id="Key-E">
<g
id="white-key-e"
transform="translate(0,-0.19166268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="e-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-136.30317,-672.42625)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="e-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="e-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="e-text"
y="276.75943"
x="61.623047"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="61.623047"
id="tspan4668-6-7"
sodipodi:role="line">E</tspan></text>
</g>
</a>
<a href="#" id="Key-F">
<g
id="white-key-f"
transform="translate(0,-0.33544268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="f-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-122.30925,-672.28247)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="f-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="f-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="f-text"
y="276.75943"
x="75.976692"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="75.976692"
id="tspan4668-6-3"
sodipodi:role="line">F</tspan></text>
</g>
</a>
<a href="#" id="Key-G">
<g
id="white-key-g"
transform="translate(0,-0.36934268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="g-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-108.4944,-672.24857)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="g-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="g-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="g-text"
y="276.75943"
x="89.272003"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="89.272003"
id="tspan4668-6-73"
sodipodi:role="line">G</tspan></text>
</g>
</a>
<a href="#" id="Key-A">
<g
id="white-key-a"
transform="translate(0,-0.51312268)">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
id="a-rect-group"
transform="matrix(3.2767822,0,0,3.2767822,-94.50048,-672.10479)">
<rect
style="opacity:1;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20480227;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="a-grey-rect"
width="3.9700634"
height="1.970214"
x="59.26228"
y="289.85236"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="a-white-rect"
width="3.9781194"
height="27.495825"
x="59.26228"
y="262.95197"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="a-text"
y="276.75943"
x="104.02252"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;stroke-width:0.26458335"
y="276.75943"
x="104.02252"
id="tspan4668-6-6"
sodipodi:role="line">A</tspan></text>
</g>
</a>
<a href="#" id="Key-C-Sharp">
<g
id="black-key-c-sharp">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-205.38614,-673.39341)"
id="c-sharp-rect-group">
<rect
style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79170525;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="c-sharp-grey-rect"
width="2.6989212"
height="1.2514575"
x="74.291664"
y="280.27954"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="c-sharp-black-rect"
width="2.6957428"
height="17.689808"
x="74.291664"
y="262.95673"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="c-sharp-text"
y="243.509"
x="38.438705"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
y="243.509"
x="38.438705"
id="tspan4668-2"
sodipodi:role="line">C#</tspan></text>
</g>
</a>
<a href="#" id="Key-D-Sharp">
<g
id="black-key-d-sharp">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-189.99357,-673.39346)"
id="d-sharp-rect-group">
<rect
style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="d-sharp-grey-rect"
width="2.6988971"
height="1.2716219"
x="74.291664"
y="280.25937"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="d-sharp-black-rect"
width="2.6957428"
height="17.689808"
x="74.291664"
y="262.95673"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="d-sharp-text"
y="243.509"
x="53.773075"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
y="243.509"
x="53.773075"
id="tspan4668-2-2"
sodipodi:role="line">D#</tspan></text>
</g>
</a>
<a href="#" id="Key-F-Sharp">
<g
id="black-key-f-sharp">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-163.56119,-673.39346)"
id="f-sharp-rect-group">
<rect
style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="f-sharp-grey-rect"
width="2.6988971"
height="1.2716219"
x="74.291664"
y="280.25937"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="f-sharp-black-rect"
width="2.6957428"
height="17.689808"
x="74.291664"
y="262.95673"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="f-sharp-text"
y="243.509"
x="80.059036"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
y="243.509"
x="80.059036"
id="tspan4668-2-1"
sodipodi:role="line">F#</tspan></text>
</g>
</a>
<a href="#" id="Key-G-Sharp">
<g
id="black-key-g-sharp">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-148.92173,-673.39346)"
id="g-sharp-rect-group">
<rect
style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="g-sharp-grey-rect"
width="2.6988971"
height="1.2716219"
x="74.291664"
y="280.25937"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="g-sharp-black-rect"
width="2.6957428"
height="17.689808"
x="74.291664"
y="262.95673"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="g-sharp-text"
y="243.10257"
x="94.651955"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
y="243.10257"
x="94.651955"
id="tspan4668-2-4"
sodipodi:role="line">G#</tspan></text>
</g>
</a>
<a href="#" id="Key-A-Sharp">
<g
id="black-key-a-sharp">
<g
inkscape:export-ydpi="72"
inkscape:export-xdpi="72"
transform="matrix(3.2767822,0,0,3.2767822,-133.19786,-673.39346)"
id="a-sharp-rect-group">
<rect
style="opacity:1;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79805452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="a-sharp-grey-rect"
width="2.6988971"
height="1.2716219"
x="74.291664"
y="280.25937"
rx="0.08074487"
ry="0.08074487" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.66028059;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="a-sharp-black-rect"
width="2.6957428"
height="17.689808"
x="74.291664"
y="262.95673"
rx="0.08074487"
ry="0.08074487" />
</g>
<text
id="a-sharp-text"
y="243.509"
x="110.64803"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.64444447px;line-height:6.61458349px;font-family:Pacifico;-inkscape-font-specification:Pacifico;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458335;enable-background:new"
xml:space="preserve"><tspan
style="font-size:5.64444447px;fill:#ffffff;stroke-width:0.26458335"
y="243.509"
x="110.64803"
id="tspan4668-2-5"
sodipodi:role="line">A#</tspan></text>
</g>
</a>
<path
d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="1.4640607"
sodipodi:arg1="0.67866249"
sodipodi:r2="0.51810318"
sodipodi:r1="0.99390382"
sodipodi:cy="169.72464"
sodipodi:cx="77.261093"
sodipodi:sides="4"
id="flare-1"
style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5174);stroke-width:1.0582726;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
sodipodi:type="star"
transform="matrix(2.1681284,0,0,0.50590109,-110.80528,84.48127)" />
<path
d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="1.4640607"
sodipodi:arg1="0.67866249"
sodipodi:r2="0.51810318"
sodipodi:r1="0.99390382"
sodipodi:cy="169.72464"
sodipodi:cx="77.261093"
sodipodi:sides="4"
id="flare-2"
style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5146);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
sodipodi:type="star"
transform="matrix(1,0,0,0.68256474,-14.497777,54.437717)" />
<path
d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="1.4640607"
sodipodi:arg1="0.67866249"
sodipodi:r2="0.51810318"
sodipodi:r1="0.99390382"
sodipodi:cy="169.72464"
sodipodi:cx="77.261093"
sodipodi:sides="4"
id="flare-3"
style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5199);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;enable-background:new"
sodipodi:type="star"
transform="matrix(1,0,0,0.68256474,-8.203631,68.866748)" />
<path
d="m 78.034761,170.34857 -0.718473,-0.10878 -0.67912,0.25852 0.10877,-0.71847 -0.258513,-0.67913 0.718473,0.10878 0.679121,-0.25852 -0.108771,0.71847 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="1.4640607"
sodipodi:arg1="0.67866249"
sodipodi:r2="0.51810318"
sodipodi:r1="0.99390382"
sodipodi:cy="169.72464"
sodipodi:cx="77.261093"
sodipodi:sides="4"
id="flare-4"
style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5086);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
sodipodi:type="star"
transform="matrix(1,0,0,0.68256474,0,53.630995)" />
<path
sodipodi:type="star"
style="opacity:0.644;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#radialGradient5239);stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
id="flare-5"
sodipodi:sides="4"
sodipodi:cx="101.47026"
sodipodi:cy="169.59991"
sodipodi:r1="0.99390382"
sodipodi:r2="0.51810318"
sodipodi:arg1="0.67866249"
sodipodi:arg2="1.4640607"
inkscape:flatsided="false"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 102.24393,170.22384 -0.71847,-0.10877 -0.67912,0.25851 0.10877,-0.71847 -0.25852,-0.67912 0.71848,0.10877 0.67912,-0.25851 -0.10877,0.71847 z"
transform="matrix(1,0,0,0.74845571,0,42.467279)" />
</g>
</svg>
<?php } elseif($method == "png"){ ?>
<img src="keyboard.png" align="middle" usemap="#keyboardmap">
<map name="keyboardmap">
<area id="go-go-geekgirljoy" alt="go-go-geekgirljoy" title="go-go-geekgirljoy" shape="rect" coords="0,0,148,48" target="_blank" href="http://geekgirljoy.wordpress.com" >
<area id="Key-C" alt="" title="" href="#" shape="poly" target="_self" coords="115,93,115,433,163,433,164,319,145,318,145,93" />
<area id="Key-D" alt="" title="" href="#" shape="poly" target="_self" coords="178,93,179,319,167,319,167,433,217,433,217,319,202,319,203,93" />
<area id="Key-E" alt="" title="" href="#" shape="poly" target="_self" coords="236,93,236,319,219,319,220,434,269,434,268,93" />
<area id="Key-F" alt="" title="" href="#" shape="poly" target="_self" coords="272,93,272,434,322,434,322,320,303,320,302,93" />
<area id="Key-G" alt="" title="" href="#" shape="poly" target="_self" coords="336,93,336,320,324,321,324,434,374,434,374,320,357,319,358,93" />
<area id="Key-A" alt="" title="" href="#" shape="poly" target="_self" coords="392,93,392,319,378,319,378,433,428,433,427,319,418,319,418,93" />
<area id="Key-B" alt="" title="" href="#" shape="poly" target="_self" coords="451,93,451,319,430,320,430,433,479,433,479,93" />
<area id="Key-C-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="146,93,146,308,178,308,178,93" />
<area id="Key-D-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="204,92,204,308,236,308,236,93" />
<area id="Key-F-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="304,93,304,308,336,308,336,93" />
<area id="Key-G-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="360,92,359,308,392,308,391,93" />
<area id="Key-A-Sharp" alt="" title="" href="#" shape="poly" target="_self" coords="419,93,420,309,451,308,450,93" />
</map>
<?php } ?>
</div>
<script>
document.getElementById("Key-C").addEventListener("click", function () {document.getElementById("C-Audio").play(); });
document.getElementById("Key-D").addEventListener("click", function () {document.getElementById("D-Audio").play(); });
document.getElementById("Key-E").addEventListener("click", function () {document.getElementById("E-Audio").play(); });
document.getElementById("Key-F").addEventListener("click", function () {document.getElementById("F-Audio").play(); });
document.getElementById("Key-G").addEventListener("click", function () {document.getElementById("G-Audio").play(); });
document.getElementById("Key-A").addEventListener("click", function () {document.getElementById("A-Audio").play(); });
document.getElementById("Key-B").addEventListener("click", function () {document.getElementById("B-Audio").play(); });
document.getElementById("Key-C-Sharp").addEventListener("click", function () {document.getElementById("C-Sharp-Audio").play(); });
document.getElementById("Key-D-Sharp").addEventListener("click", function () {document.getElementById("D-Sharp-Audio").play(); });
document.getElementById("Key-F-Sharp").addEventListener("click", function () {document.getElementById("F-Sharp-Audio").play(); });
document.getElementById("Key-G-Sharp").addEventListener("click", function () {document.getElementById("G-Sharp-Audio").play(); });
document.getElementById("Key-A-Sharp").addEventListener("click", function () {document.getElementById("A-Sharp-Audio").play(); });
</script>
</body>
</html>
If you have any questions please leave them in the comments.
If you would like to get a copy of this entire project’s code and assets you can get a copy over on GitHub here.
Please Like, Comment & Share my posts with your friends and followers on social media.
If you would like to suggest a topic or project for an upcoming post feel free to contact me.
If you found this article useful or want to help me grow consider supporting me over on Patreon.
With that, have a great week & I will see you all in the next post!
Much Love,
~Joy
Like this:
Like Loading...