f1941a90db
- 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
88 lines
4.2 KiB
HTML
88 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LIGHTSYNC</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<!-- JetBrains Mono via Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
|
|
<header class="header">
|
|
<span class="header-title">■ LIGHTSYNC</span>
|
|
<div class="status-dot" id="status-dot"></div>
|
|
<span id="status-text" class="text-dim">OFFLINE</span>
|
|
<span id="show-name" class="text-dim">— no show loaded —</span>
|
|
<div id="beat-indicator" class="beat-indicator" title="Beat pulse"></div>
|
|
</header>
|
|
|
|
<aside class="sidebar">
|
|
<div class="panel" id="devices-panel" style="flex: 0 0 auto;">
|
|
<div class="panel-header">DEVICES</div>
|
|
<div class="panel-content" id="device-list">
|
|
<span class="text-dim">loading...</span>
|
|
</div>
|
|
<details class="device-manage-section">
|
|
<summary>⚙ 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>
|
|
<option value="sk6812">SK6812</option>
|
|
<option value="ws2801">WS2801</option>
|
|
<option value="generic">Generic</option>
|
|
</select>
|
|
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
|
|
<input type="text" name="ip" placeholder="IP address" required>
|
|
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
|
|
<button type="submit">+ ADD DEVICE</button>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
<div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
|
|
<div class="panel-header">ANIMATIONS</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>
|
|
|
|
<main class="main-area">
|
|
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; flex-direction: column;">
|
|
<div class="panel-header">TIMELINE</div>
|
|
<div class="waveform-container" style="flex: 1; position: relative; min-height: 100px;">
|
|
<canvas id="waveform-canvas" style="width: 100%; height: 100%;"></canvas>
|
|
<div id="playback-cursor" class="playback-cursor"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="transport-bar" id="transport-panel">
|
|
<!-- 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>
|
|
</select>
|
|
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|