Spaces:
Running on Zero
Running on Zero
| <div class="roll-shell"> | |
| <audio data-role="player" preload="metadata" hidden></audio> | |
| <div class="roll-toolbar"> | |
| <div class="track-control"><span>Track</span><div class="track-picker"> | |
| <button data-role="track" type="button" aria-label="MIDI track" aria-describedby="midi-track-name" aria-haspopup="listbox" aria-expanded="false" aria-controls="midi-track-options"> | |
| <span class="track-swatch" aria-hidden="true"></span><span id="midi-track-name" data-role="track-name">Choose a track</span><span class="track-arrow" aria-hidden="true">▾</span> | |
| </button> | |
| <div id="midi-track-options" data-role="track-options" role="listbox" aria-label="MIDI tracks" hidden></div> | |
| </div></div> | |
| <label>Instrument <select data-role="instrument" aria-label="Track instrument"></select></label> | |
| <button data-action="add-track">+ Instrument</button> | |
| </div> | |
| <div class="roll-toolbar roll-add" data-role="add-panel" hidden> | |
| <label>New instrument <select data-role="new-instrument" aria-label="New instrument"></select></label> | |
| <button data-action="confirm-track">Add instrument</button><button data-action="cancel-track">Cancel</button> | |
| <span>Confirm the instrument before drawing notes.</span> | |
| </div> | |
| <div class="roll-toolbar roll-tools"> | |
| <button data-tool="select" title="Select and move notes (V)">↖ Select</button> | |
| <button data-tool="pencil" title="Draw notes (D)">✎ Pencil</button> | |
| <button data-tool="erase" title="Erase notes (E)">▱ Eraser</button> | |
| <label>Snap <select data-role="snap" aria-label="Time snap"><option value="0">Off</option><option value="0.04" selected>40 ms</option><option value="0.1">100 ms</option><option value="0.25">250 ms</option></select></label> | |
| <button data-action="undo" title="Undo (Ctrl/Cmd+Z)">Undo</button> | |
| <button data-action="redo" title="Redo (Ctrl/Cmd+Shift+Z)">Redo</button> | |
| <button data-action="delete">Delete selected</button> | |
| </div> | |
| <div class="roll-toolbar roll-secondary"> | |
| <button data-action="restart" title="Go to start"><span class="transport-icon" aria-hidden="true">⏮</span> Start</button> | |
| <label>Audio <select data-role="audio-source" aria-label="Audio to play"><option value="original">Original</option><option value="generated">Generated</option></select></label> | |
| <button data-action="play"><span class="transport-icon" aria-hidden="true">▶</span> Play audio</button> | |
| <button data-action="preview"><span class="transport-icon" aria-hidden="true">▶</span> Preview notes</button> | |
| <button data-action="stop"><span class="transport-icon" aria-hidden="true">■</span> Stop</button> | |
| <label>Listen <select data-role="listen" aria-label="Preview instruments"><option value="all">All instruments</option><option value="selected">Selected instrument</option></select></label> | |
| <span data-role="listen-range" aria-live="polite"></span> | |
| </div> | |
| <div class="roll-toolbar roll-secondary"> | |
| <label>Zoom <input data-role="zoom" aria-label="Timeline zoom" type="range" min="1" max="4" step="0.25" value="1"></label> | |
| <label>Velocity <input data-role="velocity" aria-label="Selected note velocity" type="number" min="1" max="127" value="90"></label> | |
| <span data-role="sound-status" aria-live="polite">GM preview</span> | |
| <span data-role="count"></span> | |
| </div> | |
| <section class="roll-midi" aria-label="MIDI keyboard recording"> | |
| <div class="roll-midi-heading"><strong>MIDI keyboard</strong><span>Play and record notes into the selected track · Chrome / Edge</span></div> | |
| <p>Connect a keyboard to your computer, click <b>Connect MIDI</b>, allow access, and choose your device below.</p> | |
| <div class="roll-toolbar"> | |
| <button data-action="connect-midi">Connect MIDI</button> | |
| <label>Keyboard <select data-role="midi-input" aria-label="MIDI input" disabled><option value="">Connect MIDI to choose</option></select></label> | |
| <button data-action="record" aria-pressed="false" disabled><span class="record-icon" aria-hidden="true">●</span> Start recording</button> | |
| <button data-action="stop-recording" disabled><span class="transport-icon" aria-hidden="true">■</span> Stop recording</button> | |
| <label><input data-role="record-snap" type="checkbox"> Snap recording</label> | |
| </div> | |
| <p data-role="midi-status" role="status">Load a clip and connect MIDI to start recording.</p> | |
| <p>Choose a track and click the waveform for a start, or drag a range. Start recording → play your keyboard → Stop recording → Apply edits. New notes replace same-pitch overlaps. Undo restores the score before the take.</p> | |
| <a data-role="midi-standalone" target="_blank" rel="noopener" hidden>Open the demo directly to connect MIDI ↗</a> | |
| </section> | |
| <p data-role="edit-lock" class="roll-lock" role="status" hidden>Editing paused — choose <b>Add instrument</b> or <b>Cancel</b> above.</p> | |
| <div class="roll-scroll" tabindex="0" aria-label="Piano roll. Only the selected track can be edited. Select notes, draw with the pencil, or erase. Drag the waveform to select a playback range."> | |
| <canvas data-role="roll" aria-label="Editable piano roll"></canvas> | |
| </div> | |
| <div class="roll-help"> | |
| <p>Only the selected track is editable. Drag empty space to select its notes · Drag selected notes to move · Drag a note’s right edge to resize</p> | |
| <p>Click the waveform to seek · Drag across it or select notes to choose a playback range · Start clears the range</p> | |
| <p>Listen chooses the instruments for Preview notes. Play audio always plays the full mix.</p> | |
| <p><kbd>Shift</kbd> + click to add to selection · <kbd>↑</kbd> <kbd>↓</kbd> transpose · <kbd>Shift</kbd> + arrows for an octave · <kbd>Del</kbd> remove</p> | |
| <p><kbd>Ctrl</kbd> / <kbd>⌘ Cmd</kbd> + <kbd>Z</kbd> undo · <kbd>V</kbd> select · <kbd>D</kbd> pencil · <kbd>E</kbd> eraser · <kbd>Esc</kbd> clear selection</p> | |
| <p>Click piano keys, draw notes, or move them with arrows or dragging to hear the selected GM instrument. Drums use a sampled kit. These preview sounds differ from the generated audio.</p> | |
| </div> | |
| <p data-role="detail" class="roll-detail">Load a clip to begin.</p> | |
| </div> | |