[mirotalksfu] - improve volume indicator

public/css/Room.css

@@ -457,33 +457,29 @@ th {
 # Settings - microphone volume indicator
 --------------------------------------------------------------*/
 
-#volumeContainer {
+.volume-container {
     display: flex;
     align-items: center;
     width: 100%;
     background-color: var(--body-bg);
-    border-radius: 10px;
+    border-radius: 8px;
 }
 
-#volumeBar {
+.volume-bar {
     flex: 1;
     height: 5px;
-    background-color: #000000;
-    position: relative;
+    margin: 0 2px;
+    background-color: #ddd;
     border-radius: 5px;
+    transition: background-color 0.3s ease;
 }
 
-#volumeLevel {
-    height: 100%;
-    background-color: #007bff;
-    border-radius: 5px;
-    transition: width 100ms ease-in-out;
+.active {
+    background-color: #3498db;
 }
 
-#volumeText {
-    margin-left: 10px;
-    font-weight: bold;
-    color: #333;
+.inactive {
+    background-color: #ddd;
 }
 
 /*--------------------------------------------------------------

public/js/Room.js

@@ -44,6 +44,8 @@ const _PEER = {
     sendVideo: '<i class="fab fa-youtube"></i>',
 };
 
+const bars = document.querySelectorAll('.volume-bar');
+
 const userAgent = navigator.userAgent.toLowerCase();
 const isTabletDevice = isTablet(userAgent);
 const isIPadDevice = isIpad(userAgent);
@@ -404,8 +406,8 @@ function getMicrophoneVolumeIndicator(stream) {
             sum += inputBuffer[i] * inputBuffer[i];
         }
         const rms = Math.sqrt(sum / inputBuffer.length);
-        const volume = Math.max(0, Math.min(1, rms * 10)) * 100;
-        if (volume > 1) updateVolumeIndicator(volume);
+        const volume = Math.max(0, Math.min(1, rms * 10));
+        updateVolumeIndicator(volume);
     };
     microphone.connect(scriptProcessor);
     scriptProcessor.connect(audioContext.destination);
@@ -416,17 +418,16 @@ function stopMicrophoneProcessing() {
         scriptProcessor.disconnect();
         scriptProcessor = null;
     }
-    volumeLevel.style.width = '0%';
-    //volumeText.textContent = '0%';
+    bars.forEach((bar) => {
+        bar.classList.toggle('inactive');
+    });
 }
 
 function updateVolumeIndicator(volume) {
-    const MIN_VOLUME = 0;
-    const MAX_VOLUME = 100;
-    const clampedVolume = Math.min(MAX_VOLUME, Math.max(MIN_VOLUME, volume));
-    const volumePercentage = ((clampedVolume - MIN_VOLUME) / (MAX_VOLUME - MIN_VOLUME)) * 100;
-    volumeLevel.style.width = `${volumePercentage}%`;
-    //volumeText.textContent = `${clampedVolume.toFixed(0)}%`;
+    const activeBars = Math.ceil(volume * bars.length);
+    bars.forEach((bar, index) => {
+        bar.classList.toggle('active', index < activeBars);
+    });
 }
 
 // ####################################################

public/views/Room.html

@@ -321,11 +321,17 @@ access to use this app.
                         </div>
                         <select id="microphoneSelect" class="form-select text-light bg-dark"></select>
                         <br />
-                        <div id="volumeContainer">
-                            <div id="volumeBar">
-                                <div id="volumeLevel"></div>
-                            </div>
-                            <!-- <span id="volumeText">0%</span> -->
+                        <div class="volume-container">
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
+                            <div class="volume-bar"></div>
                         </div>
                         <br />
                         <div id="speakerSelectDiv">