Spaces:
Sleeping
Sleeping
| <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> | |