projects / makeypiano.git / blame
| 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> |