diff options
| author | skal <pascal.massimino@gmail.com> | 2026-02-15 09:16:06 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-02-15 09:16:06 +0100 |
| commit | e94ff513689c6477e9c756f58370e4f3490dd675 (patch) | |
| tree | c0b4deb886efe33e1bd242e0dbd639527656e86f /tools/spectral_editor/index.html | |
| parent | c98286860885d1f025cd8cf9da699f174118ccba (diff) | |
feat(spectral-editor): add waveform intensity viewer for sample offset
Add interactive waveform timeline for determining SAMPLE OFFSET values:
Features:
- RMS envelope visualization (10ms windows, normalized)
- Uses synthesized PCM from spectrogram (not original WAV)
- Draggable offset marker with numeric input (0.001s precision)
- Snap-to-onset: auto-detects first transient (threshold 0.01)
- Copy button: generates `SAMPLE <name> OFFSET <seconds>` command
- Top panel (120px) with controls, z-indexed above spectrogram
Design rationale:
- Offset measured on procedural output (matches runtime behavior)
- Interactive workflow: load .spec → inspect → set offset → copy
- Supports tracker compile-time SAMPLE OFFSET feature
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Diffstat (limited to 'tools/spectral_editor/index.html')
| -rw-r--r-- | tools/spectral_editor/index.html | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html index f6c1def..75658ae 100644 --- a/tools/spectral_editor/index.html +++ b/tools/spectral_editor/index.html @@ -22,14 +22,29 @@ <div class="main-content"> <!-- Canvas area (left side, 80% width) --> <div class="canvas-container"> - <canvas id="spectrogramCanvas"></canvas> - <div id="canvasOverlay" class="canvas-overlay"> - <p>Load a .wav or .spec file to begin</p> - <p class="hint">Click "Load .wav/.spec" button or press Ctrl+O</p> + <!-- Waveform intensity timeline (top, fixed height) --> + <div class="waveform-container"> + <canvas id="waveformCanvas"></canvas> + <div class="waveform-controls"> + <label>Offset:</label> + <input type="number" id="offsetValue" class="offset-input" min="0" max="10" value="0" step="0.001"> + <span>s</span> + <button id="copyOffsetBtn" class="btn-copy" title="Copy SAMPLE line">📋</button> + <button id="snapToOnsetBtn" class="btn-snap" title="Snap to onset">🎯</button> + </div> </div> - <!-- Mini spectrum viewer (bottom-right overlay) --> - <div id="spectrumViewer" class="spectrum-viewer"> - <canvas id="spectrumCanvas" width="200" height="100"></canvas> + + <!-- Spectrogram canvas (below waveform) --> + <div class="spectrogram-wrapper"> + <canvas id="spectrogramCanvas"></canvas> + <div id="canvasOverlay" class="canvas-overlay"> + <p>Load a .wav or .spec file to begin</p> + <p class="hint">Click "Load .wav/.spec" button or press Ctrl+O</p> + </div> + <!-- Mini spectrum viewer (bottom-right overlay) --> + <div id="spectrumViewer" class="spectrum-viewer"> + <canvas id="spectrumCanvas" width="200" height="100"></canvas> + </div> </div> </div> |