1 <!-- This Source Code Form is subject to the terms of the Mozilla Public
2 - License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 - You can obtain one at http://mozilla.org/MPL/2.0/. -->
6 <html manifest="manifest.appcache">
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9 <!-- try to force a 1:1 scaling on mobile, see
10 https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
11 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
12 <title>MaKey MaKey Piano</title>
13 <script src="js/piano.js" type="application/javascript;version=1.8"></script>
14 <link rel="stylesheet" href="style/piano.css">
15 <link rel="shortcut icon" href="style/pianoIcon16.png" type="image/png">
18 <h1>MaKey MaKey Piano</h1>
22 <td class="key white upper" colspan="2" id="c1-upper"></td>
23 <td class="key black" colspan="2"></td>
24 <td class="key white upper small" colspan="1" id="d1-upper"></td>
25 <td class="key black" colspan="2"></td>
26 <td class="key white upper" colspan="2" id="e1-upper"></td>
27 <td class="key white upper" colspan="2" id="f1-upper"></td>
28 <td class="key black" colspan="2"></td>
29 <td class="key white upper small" colspan="1" id="g1-upper"></td>
30 <td class="key black" colspan="2"></td>
31 <td class="key white upper small" colspan="1" id="a1-upper"></td>
32 <td class="key black" colspan="2"></td>
33 <td class="key white upper" colspan="2" id="b1-upper"></td>
34 <td class="key white upper" colspan="2" id="c2-upper"></td>
35 <td class="key black small" colspan="1"></td>
38 <td class="key white lower" colspan="3" id="c1-lower"
39 onclick="gPitches.play('c1');">C</td>
40 <td class="key white lower" colspan="3" id="d1-lower"
41 onclick="gPitches.play('d1');">D</td>
42 <td class="key white lower" colspan="3" id="e1-lower"
43 onclick="gPitches.play('e1');">E</td>
44 <td class="key white lower" colspan="3" id="f1-lower"
45 onclick="gPitches.play('f1');">F</td>
46 <td class="key white lower" colspan="3" id="g1-lower"
47 onclick="gPitches.play('g1');">G</td>
48 <td class="key white lower" colspan="3" id="a1-lower"
49 onclick="gPitches.play('a1');">A</td>
50 <td class="key white lower" colspan="3" id="b1-lower"
51 onclick="gPitches.play('b1');">B</td>
52 <td class="key white lower" colspan="3" id="c2-lower"
53 onclick="gPitches.play('c2');">C</td>
57 <button id="helptoggle" onclick="toggleHelp();">?</button>
59 <p>Connect a <a href="http://makeymakey.com/">MaKey MaKey</a> to Bananas or
60 whatever you like, keys will match C major pitches as follows:</p>
62 <table id="helptable">
63 <tr><th>Key</th><th>Pitch</th></tr>
64 <tr><td>Space</td><td>C'</td></tr>
65 <tr><td>Right</td><td>D'</td></tr>
66 <tr><td>Up</td><td>E'</td></tr>
67 <tr><td>Left</td><td>F'</td></tr>
68 <tr><td>Down</td><td>G'</td></tr>
69 <tr><td>W</td><td>A'</td></tr>
70 <tr><td>A</td><td>B'</td></tr>
71 <tr><td>S</td><td>C''</td></tr>
73 <div id="helphide"><button onclick="toggleHelp();">Hide Help</button></div>