Render channels with gap in between

Author: Andrews54757

chrome/player/ui/audio/AudioChannelMixer.mjs

@@ -198,7 +198,7 @@ export class AudioChannelMixer extends AbstractAudioModule {
     const canvas = els.volumeMeter;
     const ctx = els.volumeMeterCtx;
 
-    const width = canvas.clientWidth * window.devicePixelRatio;
+    const width = canvas.clientWidth * window.devicePixelRatio * 2;
     const height = canvas.clientHeight * window.devicePixelRatio;
     if (width === 0 || height === 0) return;
 
@@ -216,7 +216,7 @@ export class AudioChannelMixer extends AbstractAudioModule {
     const minDb = outputMeter.minDecibels;
     const maxDb = outputMeter.maxDecibels;
     const now = Date.now();
-    const channelWidth = width / data.length;
+    const channelWidthDivided = (width + 1) / data.length;
 
     data.forEach((channelData, i) => {
       const cache = this.outputMeterCache[i];
@@ -237,7 +237,9 @@ export class AudioChannelMixer extends AbstractAudioModule {
         cache.peakTime = now;
       }
 
-      const xStart = i * channelWidth;
+      const xStart = Math.round(i * channelWidthDivided);
+      const xEnd = Math.round((i + 1) * channelWidthDivided);
+      const channelWidth = xEnd - xStart - (i === data.length - 1 ? 0 : 1); // 1px gap except last channel
       for (let i = 0; i < rectCount; i++) {
         const y = height - (i + 1) * rectHeight;