Commit | Line | Data |
---|---|---|
cab0e98d RK |
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/. --> | |
4 | ||
5 | <!DOCTYPE html> | |
6 | <html manifest="manifest.appcache"> | |
7 | <head> | |
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"> | |
16 | </head> | |
17 | <body id="body"> | |
18 | <h1>MaKey MaKey Piano</h1> | |
19 | ||
20 | <table id="keyboard"> | |
21 | <tr> | |
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> | |
36 | </tr> | |
37 | <tr> | |
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> | |
54 | </tr> | |
55 | </table> | |
56 | ||
57 | <button id="helptoggle" onclick="toggleHelp();">?</button> | |
58 | <div id="helpdesc"> | |
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> | |
61 | ||
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> | |
72 | </table> | |
73 | <div id="helphide"><button onclick="toggleHelp();">Hide Help</button></div> | |
74 | </div> | |
75 | ||
76 | </body> | |
77 | </html> |