Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(02-03): redesign frontend — browser audio element, beat markers, animation selector

Browse Source 
- index.html: add <audio id=player> (hidden), beat-indicator dot in header
- index.html: animation selector panel with Beat Pulse/Strobe/Color Wave/Rainbow options
- index.html: remove seek slider + time display (browser audio element has native controls)
- index.html: upload button + file selector remain in transport bar
- app.js: wire <audio> element — play/pause/seeked/timeupdate events send WS ticks
- app.js: 10Hz setInterval tick loop (supplements native timeupdate ~4Hz)
- app.js: WS beat message -> flashBeatIndicator() animation
- app.js: loadWaveformAndBeats() draws waveform peaks + beat marker lines on canvas
- app.js: loadSelectedFile() sets audio.src=/shows/filename, fetches beats+waveform
- app.js: upload response caches beat data returned from server immediately
- style.css: .beat-indicator with .beat-flash (yellow glow animation)
- style.css: .animation-select-input for the animations panel dropdown
This commit is contained in:
Claude
2026-04-06 15:38:30 +00:00
parent 1f1ff92446
commit f1941a90db
3 changed files with 277 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
lightsync/frontend/index.html
View File

@@ -17,6 +17,7 @@
<div class="status-dot" id="status-dot"></div>
<span id="status-text" class="text-dim">OFFLINE</span>
<span id="show-name" class="text-dim">&#8212; no show loaded &#8212;</span>
<div id="beat-indicator" class="beat-indicator" title="Beat pulse"></div>
</header>
<aside class="sidebar">
@@ -26,7 +27,7 @@
<span class="text-dim">loading...</span>
</div>
<details class="device-manage-section">
<summary>⚙ MANAGE DEVICES</summary>
<summary>&#9881; MANAGE DEVICES</summary>
<form id="add-device-form" class="device-form">
<input type="text" name="name" placeholder="Device name" required>
<select name="strip_type" required>
@@ -43,7 +44,14 @@
</div>
<div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
<div class="panel-header">ANIMATIONS</div>
<div class="panel-content text-dim">[ PHASE 3+ ]</div>
<div class="panel-content">
<select id="animation-select" class="animation-select-input">
<option value="beat_pulse">Beat Pulse</option>
<option value="strobe">Strobe</option>
<option value="color_wave">Color Wave</option>
<option value="rainbow">Rainbow</option>
</select>
</div>
</div>
</aside>
@@ -58,26 +66,16 @@
</main>
<footer class="transport-bar" id="transport-panel">
<div class="transport-controls">
<button id="btn-play" class="transport-btn" title="Play">&#9654;</button>
<button id="btn-pause" class="transport-btn" title="Pause" style="display:none">&#9646;&#9646;</button>
<button id="btn-stop" class="transport-btn" title="Stop">&#9632;</button>
</div>
<div class="transport-time">
<span id="time-current">0:00.0</span>
<span class="text-dim">/</span>
<span id="time-duration">0:00.0</span>
</div>
<div class="transport-seek">
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
</div>
<!-- Hidden native audio element — browser handles playback -->
<audio id="player" style="display:none;"></audio>
<div class="transport-file">
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG from your computer" style="cursor:pointer;">
+ UPLOAD
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
</label>
<select id="audio-select" class="audio-path-input">
<option value="">— no files yet, upload first —</option>
<option value="">&#8212; no files yet, upload first &#8212;</option>
</select>
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
</div>