make responsive canvas -> audioVisualizer

src/pages/indexInterface.js

@@ -66,7 +66,6 @@ const IndexInterface = () => {
         analyser.fftSize = 256;
 
         let bufferLength = analyser.frequencyBinCount;
-        console.log(bufferLength);
 
         let dataArray = new Uint8Array(bufferLength);
 
@@ -77,7 +76,7 @@ const IndexInterface = () => {
         let barHeight;
         let x = 0;
 
-        let frameString = '==================================================='
+        let frameString = '===================================================='
 
         let frameStrings = [] // 52 chars in row
 
@@ -118,7 +117,8 @@ const IndexInterface = () => {
                 frame = frameString.slice(0, barHeight / 10) + '='
                 ctx.fillText(frame, 0, x);
 
-                x += barWidth - 27;
+                
+                x += window.innerHeight / (bufferLength - 34);
             }
         }
         const timerAudio = () => {
@@ -153,13 +153,12 @@ const IndexInterface = () => {
                     document.getElementById('audioProgressBar').innerHTML = bar.replace('|', '#')
                     lastProgressValue = progress
                 }
-                console.log(progress)
-                console.log(lastProgressValue)
             }
         }
 
         audio.play();
         renderFrame();
+        console.log('height ' + window.innerHeight + ', width ' + window.innerWidth)
         await progressBarAudio()
     }
 

src/styles/audioVisualizer.scss

@@ -1,7 +1,6 @@
 #audioVisualizerDiv {
+    height: 100%;
     width: 100%;
-    height: 20%;
-    display: flex;
 
     #audioMenu {
         height: 500px;
@@ -11,7 +10,8 @@
         transform: translateY(-50%);
         position: fixed;
         text-align: center;
-        
+        z-index: 1;
+
         div {
             padding-top: 5px;
         }
@@ -20,6 +20,8 @@
     #canvas {
         height: 100%;
         width: 100%;
+        position: absolute;
+        z-index: 0;
     }
 
     #audio {