assets/visualizer.html

<section class="msv-root" data-state="idle" aria-label="MuScriptor transcription result">
  <header class="msv-topbar">
    <div class="msv-heading">
      <p class="msv-eyebrow">
        <span class="msv-status-dot" aria-hidden="true"></span>
        <span data-field="state-label">Ready for audio</span>
      </p>
      <h2 class="msv-title" data-field="audio-name">Your transcription</h2>
      <p class="msv-subtitle" data-field="status">Upload a recording to reveal its notes and instruments.</p>
    </div>

    <div class="msv-actions" aria-label="Playback and download controls">
      <button class="msv-button" type="button" data-action="play" aria-label="Play transcription" title="Play transcription" disabled>
        <svg viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.8 4.7 15 10l-8.2 5.3V4.7Z"></path>
        </svg>
      </button>
      <button class="msv-button" type="button" data-action="stop" aria-label="Stop playback" title="Stop playback" disabled>
        <svg viewBox="0 0 20 20" aria-hidden="true">
          <rect x="5.5" y="5.5" width="9" height="9" rx="1"></rect>
        </svg>
      </button>
      <a class="msv-download" data-action="download-full" aria-label="Download full MIDI" aria-disabled="true" tabindex="-1">
        <svg viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10 3.5v9m0 0 3.2-3.2M10 12.5 6.8 9.3M4.5 15.7h11"></path>
        </svg>
        <span>Full MIDI</span>
      </a>
    </div>
  </header>

  <div class="msv-progress-wrap" data-region="progress" hidden>
    <div class="msv-progress-meta">
      <span class="msv-progress-copy" data-field="progress-copy">Preparing inference…</span>
      <span class="msv-progress-value" data-field="progress-value">0%</span>
    </div>
    <div class="msv-progress-track" role="progressbar" aria-label="Transcription progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <div class="msv-progress-bar" data-field="progress-bar"></div>
    </div>
  </div>

  <div class="msv-stats" aria-label="Transcription statistics">
    <div class="msv-stat">
      <span class="msv-stat-label">Duration</span>
      <span class="msv-stat-value" data-field="duration">—</span>
    </div>
    <div class="msv-stat">
      <span class="msv-stat-label">Notes</span>
      <span class="msv-stat-value" data-field="note-count">—</span>
    </div>
    <div class="msv-stat">
      <span class="msv-stat-label">Tracks</span>
      <span class="msv-stat-value" data-field="track-count">—</span>
    </div>
    <div class="msv-stat">
      <span class="msv-stat-label">Elapsed</span>
      <span class="msv-stat-value" data-field="elapsed">—</span>
    </div>
  </div>

  <div class="msv-roll-shell">
    <div class="msv-roll-labelbar">
      <span class="msv-roll-label">Piano roll</span>
      <span class="msv-roll-hint">Scroll horizontally to explore</span>
    </div>
    <div class="msv-roll-scroll" data-region="roll-scroll" tabindex="0" aria-label="Scrollable piano roll">
      <div class="msv-roll-stage" data-region="roll-stage">
        <canvas class="msv-roll-canvas" data-canvas="notes" role="img" aria-label="Color-coded transcription piano roll"></canvas>
        <canvas class="msv-cursor-canvas" data-canvas="cursor" aria-hidden="true"></canvas>
      </div>
      <div class="msv-empty" data-region="empty">
        <div class="msv-empty-inner">
          <div class="msv-empty-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M5 15.5V8.7m3 9.1V5.6m3 11.1V9.2m3 7.8V3.8m3 12.4V7.4m3 7.3v-4.1"></path>
            </svg>
          </div>
          <p class="msv-empty-title" data-field="empty-title">A score will appear here</p>
          <p class="msv-empty-copy" data-field="empty-copy">MuScriptor separates notes into individual, color-coded instrument tracks.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="msv-section-heading">
    <h3>Instrument tracks</h3>
    <span class="msv-track-count" data-field="track-summary">No tracks yet</span>
  </div>
  <div class="msv-track-list" data-region="tracks" aria-label="Instrument tracks">
    <div class="msv-track-empty">Tracks will appear after transcription.</div>
  </div>

  <p class="msv-sr-only" data-region="announcer" role="status" aria-live="polite"></p>
</section>