feat: Web Client — RMS meter визуализация

Добавлено:
- RMS bar с градиентом (зелёный → жёлтый → красный)
- Цифровое значение RMS (0.00 - 1.00)
- CSS стили для .rms-bar и .rms-fill
- Размещение под audio canvas

Визуализация:
[████████░░] 0.42
This commit is contained in:
2026-05-21 15:52:04 +03:00
parent fafc39511b
commit 023e283d3f
+28
View File
@@ -234,6 +234,22 @@
accent-color: #0ff;
}
/* RMS Meter */
.rms-bar {
height: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.rms-fill {
height: 100%;
background: linear-gradient(90deg, #00ff88 0%, #ffc107 70%, #ff4757 100%);
transition: width 0.1s ease;
border-radius: 4px;
}
@media (max-width: 1000px) {
.dashboard { grid-template-columns: 1fr; gap: 1.5rem; }
.glass-panel { padding: 1.5rem; }
@@ -287,6 +303,18 @@
<div class="viz-wrapper">
<canvas id="audioCanvas" width="400" height="60" style="width:100%; height: 70px"></canvas>
</div>
<!-- RMS Level Meter -->
<div style="margin-top: 15px;">
<div class="flex-between" style="margin-bottom: 5px;">
<span style="color: #aaa; font-size: 12px;">📊 RMS LEVEL</span>
<span id="rmsValue" style="color:#0ff; font-family: monospace; font-size: 14px;">0.00</span>
</div>
<div class="rms-bar">
<div class="rms-fill" id="rmsFill" style="width: 0%;"></div>
</div>
</div>
<div class="flex-between" style="width:100%; margin-top: 8px;">
<span>🔊 VOLUME</span>
<span id="volumeValue" style="color:#0ff">0.80</span>