flag = 1; // flag to not multiply events
window.addEventListener("click", function () {
  if (!flag) return; // if event is on, exit
    flag = !flag;
  document.getElementById("text").style.visibility = "hidden";
  startListening(document.getElementById("micCircle"));
});

function startListening(e) {
  var audioContext = window.AudioContext || window.webkitAudioContext;
  var analyserNode, frequencyData = new Uint8Array(128);
  if (audioContext) {
        var audioAPI = new audioContext(); // Web Audio API is available.
    } else {
        /* ERROR HANDLING */
    }
  
  function animateStuff() {
        requestAnimationFrame(animateStuff);
        analyserNode.getByteFrequencyData(frequencyData);
        var rang = Math.floor(frequencyData.length /2); // find equal distance in haystack
        var FREQ = frequencyData[rang] / 255;
        e.style.opacity = FREQ + 0.1
    }
  
  function createAnalyserNode(audioSource) {
    analyserNode = audioAPI.createAnalyser();
    analyserNode.fftSize = 2048;
    audioSource.connect(analyserNode);
  }
  
  var gotStream = function(stream) {
    // Create an audio input from the stream.
    var audioSource = audioAPI.createMediaStreamSource(stream);
    createAnalyserNode(audioSource);
    animateStuff();
  };
  
  setTimeout(function(){ console.log( frequencyData )}, 5000 );
  
  // pipe in analysing to getUserMedia
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: false })
    .then(gotStream);
}

html, 
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.micContainer {
  font-size: 40px;
  color: #dd3333;
  display: flex;
  align-items: center;
  justify-content: center;
}

#text {
  position: absolute;
  top: 0px;
}

#icon {
  z-index: 20;
}

#micCircle {
  opacity: 0;
  position: fixed;
  z-index: 10;
}

#micCircle {
  position: fixed;
}

#micCircle1 {
  background: #dd3333;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0.5;
  position: absolute;
  top: -35px;
  left: -35px;
  z-index: 10;
}

#micCircle2 {
  background: transparent;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #dd3333;
  position: absolute;
  top: -44px;
  left: -44px;
  z-index: 10;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<h3 id="text">click anywhere to start listening</h3>
<div class="micContainer">
  <div id="micCircle">
    <div id="micCircle1"></div>  
    <div id="micCircle2"></div>
  </div>
  <i id="icon" class="fa-solid fa-microphone"></i>  
</div>