diff --git a/src/pages/indexInterface.js b/src/pages/indexInterface.js index 9cac429..012c8fd 100644 --- a/src/pages/indexInterface.js +++ b/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() } diff --git a/src/styles/audioVisualizer.scss b/src/styles/audioVisualizer.scss index a3ca360..c66470e 100644 --- a/src/styles/audioVisualizer.scss +++ b/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 {