Spaces:
Running on Zero
Running on Zero
File size: 3,399 Bytes
b7f3d13 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <main class="midi-app">
<section class="hero">
<div class="brand-mark" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<div>
<p class="eyebrow">GRADIO MIDI LAB</p>
<h1>MIDI Canvas</h1>
<p class="subtitle">Écoutez, explorez et isolez chaque piste — directement dans votre navigateur.</p>
</div>
<div class="status-pill"><i></i><span>Prêt</span></div>
</section>
<section class="drop-zone" tabindex="0" role="button" aria-label="Importer un fichier MIDI">
<input class="file-input" type="file" accept=".mid,.midi,audio/midi,audio/x-midi" hidden>
<div class="drop-icon" aria-hidden="true">↥</div>
<div>
<strong>Déposez votre fichier MIDI ici</strong>
<span>ou cliquez pour parcourir · MID / MIDI · 5 Mo max.</span>
</div>
<button class="browse-button" type="button">Choisir un fichier</button>
</section>
<section class="message-panel" aria-live="polite"></section>
<section class="workspace" hidden>
<div class="file-heading">
<div>
<p class="file-kicker">FICHIER CHARGÉ</p>
<h2 class="song-title"></h2>
<p class="file-name"></p>
</div>
<div class="meta-badges"></div>
</div>
<div class="transport">
<button class="play-button" type="button" aria-label="Lecture">▶</button>
<button class="stop-button icon-button" type="button" aria-label="Retour au début">■</button>
<span class="current-time">0:00.0</span>
<input class="seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="Position de lecture">
<span class="duration">0:00.0</span>
<label class="compact-control" title="Vitesse de lecture">
<span>Tempo</span>
<select class="speed" aria-label="Vitesse de lecture">
<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>
<option value="2">2×</option>
</select>
</label>
<label class="volume-control" title="Volume général">
<span aria-hidden="true">◖</span>
<input class="volume" type="range" min="0" max="1" step="0.01" value="0.72" aria-label="Volume général">
</label>
</div>
<div class="visualizer-card">
<div class="card-heading">
<div>
<p class="section-label">PIANO ROLL</p>
<span class="pitch-range"></span>
</div>
<label class="zoom-control">
<span>Zoom</span>
<input class="zoom" type="range" min="1" max="8" step="1" value="1">
</label>
</div>
<canvas class="piano-roll" height="300" aria-label="Visualisation des notes MIDI"></canvas>
<p class="canvas-hint">Cliquez dans la visualisation pour vous déplacer.</p>
</div>
<div class="tracks-card">
<div class="card-heading">
<div>
<p class="section-label">PISTES</p>
<span class="track-summary"></span>
</div>
<button class="reset-mix" type="button">Réinitialiser le mix</button>
</div>
<div class="track-list"></div>
</div>
</section>
<footer>Audio synthétisé localement avec Web Audio · Aucun stockage persistant n’est configuré</footer>
</main>
|