Add real-time audio spectrum test for audio sources and templates

- Add WebSocket endpoints for live audio spectrum streaming at ~20Hz
- Audio source test: resolves device/channel, shares stream via ref-counting
- Audio template test: includes device picker dropdown for selecting input
- Canvas-based 64-band spectrum visualizer with falling peaks and beat flash
- Channel-aware: mono sources show left/right/mixed spectrum correctly

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-26 14:19:41 +03:00
parent 4806f5020c
commit 147ef3b4eb
12 changed files with 725 additions and 6 deletions

View File

@@ -18,6 +18,60 @@
z-index: 2500;
}
/* Audio test spectrum canvas */
.audio-test-canvas {
display: block;
width: 100%;
height: 200px;
background: #111;
border-radius: 6px;
}
.audio-test-stats {
display: flex;
gap: 20px;
align-items: center;
padding: 10px 0 0;
font-family: monospace;
}
.audio-test-stat {
display: flex;
align-items: center;
gap: 6px;
}
.audio-test-stat-label {
color: var(--text-muted, #888);
font-size: 0.85em;
}
.audio-test-stat-value {
font-weight: 600;
min-width: 50px;
}
.audio-test-beat-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #444;
transition: background 0.1s;
}
.audio-test-beat-dot.active {
background: #ff4444;
box-shadow: 0 0 8px #ff4444;
}
.audio-test-status {
text-align: center;
padding: 8px 0;
color: var(--text-muted, #888);
font-size: 0.9em;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }