File size: 1,388 Bytes
59e4843
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="player" aria-label="MIDI piano roll player">
  <header><div><strong>MIDI piano roll</strong><span class="subtitle">Grand Piano</span></div><span class="note-count">No MIDI loaded</span></header>
  <div class="transport">
    <button class="play" disabled aria-label="Play piano MIDI">▶ Play</button>
    <button class="restart" disabled aria-label="Restart playback">↺</button>
    <output class="clock" aria-label="Playback time">0:00 / 0:00</output>
    <label class="speed-label">Speed <select class="speed" aria-label="Playback speed"><option value="0.5">0.5×</option><option value="0.75">0.75×</option><option value="1" selected>1×</option><option value="1.25">1.25×</option><option value="1.5">1.5×</option></select></label>
  </div>
  <input class="seek" type="range" min="0" max="1" value="0" step="0.01" disabled aria-label="Playback position">
  <div class="roll-wrap"><canvas class="roll" tabindex="0" role="img" aria-label="MIDI notes by time and pitch. Click to seek; use left and right arrows to move one second."></canvas><p class="empty">Choose an example or generate piano MIDI to play.</p></div>
  <footer><span>Click the roll to seek · lit notes are playing</span><label>Zoom <input class="zoom" type="range" min="1" max="4" step="0.25" value="1" aria-label="Piano roll zoom"></label></footer>
  <p class="error" role="status"></p>
</section>