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;
|
||||
}
|
||||
|
||||
/* 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>
|
||||
|
||||
Reference in New Issue
Block a user