index.html

   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>