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:
@@ -234,6 +234,22 @@
|
|||||||
accent-color: #0ff;
|
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) {
|
@media (max-width: 1000px) {
|
||||||
.dashboard { grid-template-columns: 1fr; gap: 1.5rem; }
|
.dashboard { grid-template-columns: 1fr; gap: 1.5rem; }
|
||||||
.glass-panel { padding: 1.5rem; }
|
.glass-panel { padding: 1.5rem; }
|
||||||
@@ -287,6 +303,18 @@
|
|||||||
<div class="viz-wrapper">
|
<div class="viz-wrapper">
|
||||||
<canvas id="audioCanvas" width="400" height="60" style="width:100%; height: 70px"></canvas>
|
<canvas id="audioCanvas" width="400" height="60" style="width:100%; height: 70px"></canvas>
|
||||||
</div>
|
</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;">
|
<div class="flex-between" style="width:100%; margin-top: 8px;">
|
||||||
<span>🔊 VOLUME</span>
|
<span>🔊 VOLUME</span>
|
||||||
<span id="volumeValue" style="color:#0ff">0.80</span>
|
<span id="volumeValue" style="color:#0ff">0.80</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user