title: Trying to make audio visualization with circle ripples on Canvas and with javascript
body: <p>Basically I'm trying to make an audio visualization with circle ripple explosions. I am not sure how to exactly name it, but it looks something like this: <a href="https://codepen.io/alek/pen/EyyLgp" rel="nofollow noreferrer">https://codepen.io/alek/pen/EyyLgp</a>, except I'm looking for more like when you click a circle appears, expands and disappear. It doesn't necessarily have to be a filled circle.</p>
  
  <p>Here's my js code for audio visualization (Note: I did take the code from Nick Jones - website: <a href="https://codepen.io/nfj525/pen/rVBaab" rel="nofollow noreferrer">https://codepen.io/nfj525/pen/rVBaab</a>, and I credit him for the cool audio visualizations made)</p>
  
  <pre><code>let file = document.querySelector("choose-file");
  let audio = document.querySelector("audio-player");
  
  file.onchange = function() {
    let files = this.files;
    audio.src = URL.createObjectURL(files[0]);
    audio.load();
    audio.play();
    let context = new AudioContext();
    let src = context.createMediaElementSource(audio);
    let analyser = context.createAnalyser();
  
    let canvas = document.querySelector("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let ctx = canvas.getContext("2d");
  
    src.connect(analyser);
    analyser.connect(context.destination);
  
    analyser.fftSize = 256;
  
    let bufferLength = analyser.frequencyBinCount;
    console.log(bufferLength);
  
    let dataArray = new Uint8Array(bufferLength);
  
    let WIDTH = canvas.width;
    let HEIGHT = canvas.height;
  
    let barWidth = (WIDTH / bufferLength) * 2.5;
    let barHeight;
    let x = 0;
  
    function renderFrame() {
      requestAnimationFrame(renderFrame);
  
      x = 0;
  
      analyser.getByteFrequencyData(dataArray);
  
      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);
  
      for (let i = 0; i &lt; bufferLength; i++) {
        barHeight = dataArray[i];
  
        let r = barHeight + (25 * (i/bufferLength));
        let g = 250 * (i/bufferLength);
        let b = 50;
  
        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
  
        x += barWidth + 1;
      }
    }
  
    audio.play();
    renderFrame();
  };
  </code></pre>
  
  <p>So currently this audio visualization is creating rectangles according to the music, but I would like to change that to circles instead. So on the canvas, circles would appear randomly on the screen and have this ripple, explosion effect, disappear and a new circle would appear. I thought maybe I could replace <code>fillRect()</code> with <code>arc()</code>, but I realize that there is more logic behind it. Does anybody have any ideas how I could possibly change the rectangles to circles?</p>