piano_markup.html

<div id="p-wrapper">
  <ul id="piano">
    <li><div class="anchor clickable" data-note="A2"></div></li>
    <li><div class="anchor clickable" data-note="B2"></div><span></span></li>
    <li><div class="anchor clickable" data-note="C3"></div></li>
    <li><div class="anchor clickable" data-note="D3"></div><span></span></li>
    <li><div class="anchor clickable" data-note="E3"></div><span></span></li>
    <li><div class="anchor clickable" data-note="F3"></div></li>
    <li><div class="anchor clickable" data-note="G3"></div><span></span></li>
    <li><div class="anchor clickable" data-note="A3"></div><span></span></li>
    <li><div class="anchor clickable" data-note="B3"></div><span></span></li>
    <li><div class="anchor clickable" data-note="C4"></div></li>
    <li><div class="anchor clickable" data-note="D4"></div></li>
    <li><div class="anchor clickable" data-note="E4"></div><span></span></li>
    <li><div class="anchor clickable" data-note="F4"></div><span></span></li>
    <li><div class="anchor clickable" data-note="G4"></div></li>
    <li><div class="anchor clickable" data-note="A4"></div><span></span></li>
    <li><div class="anchor clickable" data-note="B4"></div><span></span></li>
    <li><div class="anchor clickable" data-note="C5"></div><span></span></li>
  </ul>
</div>