A piano to hack on while going to/from work.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

72 lines
5.2 KiB

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="p-wrapper">
<ul id="piano">
<li><div class="anchor" data-note="21"></div>A</li>
<li><div class="anchor" data-note="23"></div><span class="black_key" data-note="22"></span>B</li>
<li><div class="anchor" data-note="24"></div>C</li>
<li><div class="anchor" data-note="26"></div><span class="black_key" data-note="25"></span>D</li>
<li><div class="anchor" data-note="28"></div><span class="black_key" data-note="27"></span>E</li>
<li><div class="anchor" data-note="29"></div>F</li>
<li><div class="anchor" data-note="31"></div><span class="black_key" data-note="30"></span>G</li>
<li><div class="anchor" data-note="33"></div><span class="black_key" data-note="32"></span>A</li>
<li><div class="anchor" data-note="35"></div><span class="black_key" data-note="34"></span>B</li>
<li><div class="anchor" data-note="36"></div>C</li>
<li><div class="anchor" data-note="38"></div><span class="black_key" data-note="37"></span>D</li>
<li><div class="anchor" data-note="40"></div><span class="black_key" data-note="39"></span>E</li>
<li><div class="anchor" data-note="41"></div>F</li>
<li><div class="anchor" data-note="43"></div><span class="black_key" data-note="42"></span>G</li>
<li><div class="anchor" data-note="45"></div><span class="black_key" data-note="44"></span>A</li>
<li><div class="anchor" data-note="47"></div><span class="black_key" data-note="46"></span>B</li>
<li><div class="anchor" data-note="48"></div>C</li>
<li><div class="anchor" data-note="50"></div><span class="black_key" data-note="49"></span>D</li>
<li><div class="anchor" data-note="52"></div><span class="black_key" data-note="51"></span>E</li>
<li><div class="anchor" data-note="53"></div>F</li>
<li><div class="anchor" data-note="55"></div><span class="black_key" data-note="54"></span>G</li>
<li><div class="anchor" data-note="57"></div><span class="black_key" data-note="56"></span>A</li>
<li><div class="anchor" data-note="59"></div><span class="black_key" data-note="58"></span>B</li>
<li><div class="anchor" data-note="60"></div>C</li>
<li><div class="anchor" data-note="62"></div><span class="black_key" data-note="61"></span>D</li>
<li><div class="anchor" data-note="64"></div><span class="black_key" data-note="63"></span>E</li>
<li><div class="anchor" data-note="65"></div>F</li>
<li><div class="anchor" data-note="67"></div><span class="black_key" data-note="66"></span>G</li>
<li><div class="anchor" data-note="69"></div><span class="black_key" data-note="68"></span>A</li>
<li><div class="anchor" data-note="71"></div><span class="black_key" data-note="70"></span>B</li>
<li><div class="anchor" data-note="72"></div>C</li>
<li><div class="anchor" data-note="74"></div><span class="black_key" data-note="73"></span>D</li>
<li><div class="anchor" data-note="76"></div><span class="black_key" data-note="75"></span>E</li>
<li><div class="anchor" data-note="77"></div>F</li>
<li><div class="anchor" data-note="79"></div><span class="black_key" data-note="78"></span>G</li>
<li><div class="anchor" data-note="81"></div><span class="black_key" data-note="80"></span>A</li>
<li><div class="anchor" data-note="83"></div><span class="black_key" data-note="82"></span>B</li>
<li><div class="anchor" data-note="84"></div>C</li>
<li><div class="anchor" data-note="86"></div><span class="black_key" data-note="85"></span>D</li>
<li><div class="anchor" data-note="88"></div><span class="black_key" data-note="87"></span>E</li>
<li><div class="anchor" data-note="89"></div>F</li>
<li><div class="anchor" data-note="91"></div><span class="black_key" data-note="90"></span>G</li>
<li><div class="anchor" data-note="93"></div><span class="black_key" data-note="92"></span>A</li>
<li><div class="anchor" data-note="95"></div><span class="black_key" data-note="94"></span>B</li>
<li><div class="anchor" data-note="96"></div>C</li>
<li><div class="anchor" data-note="98"></div><span class="black_key" data-note="97"></span>D</li>
<li><div class="anchor" data-note="100"></div><span class="black_key" data-note="99"></span>E</li>
<li><div class="anchor" data-note="101"></div>F</li>
<li><div class="anchor" data-note="103"></div><span class="black_key" data-note="102"></span>G</li>
<li><div class="anchor" data-note="105"></div><span class="black_key" data-note="104"></span>A</li>
<li><div class="anchor" data-note="107"></div><span class="black_key" data-note="106"></span>B</li>
<li><div class="anchor" data-note="108"></div>C</li>
</ul>
</div>
<script type="text/javascript" src="js/libs/midi/AudioDetect.js"></script>
<script type="text/javascript" src="js/libs/midi/LoadPlugin.js"></script>
<script type="text/javascript" src="js/libs/midi/Plugin.js"></script>
<script type="text/javascript" src="js/libs/midi/Player.js"></script>
<script type="text/javascript" src="js/libs/window/DOMLoader.XMLHttp.js"></script>
<script src="inc/Base64.js" type="text/javascript"></script>
<script src="inc/base64binary.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>