JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://rawcdn.githack.com/goldfire/howler.js/master/src/howler.core.js"></script>
<button id="play">
Play
</button>

 <canvas id="canvas"></canvas>

JavaScript

const url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/481938/Find_My_Way_Home.mp3'
        var Sound = new Howl({
            src: 'https://tunein.streamguys1.com/cnn-new',
            html5: true, // A live stream can only be played through HTML5 Audio.
          format: ['mp3']
        });

document.querySelector("#play").onclick = function(){
console.log("log")
  Sound.play();
//return;
const canvas = document.getElementById("canvas");
 ///////// <CANVAS> INITIALIZATION //////////
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext("2d");
  ///////////////////////////////////////////


  // Create analyzer
  var analyser = Howler.ctx.createAnalyser();

    // Connect master gain to analyzer
    Howler.masterGain.connect(analyser);

 		// Connect analyzer to destination
  	analyser.connect(Howler.ctx.destination);

 		analyser.fftSize = 16384;

    const bufferLength = analyser.frequencyBinCount; 

    const dataArray = new Uint8Array(bufferLength); 

    const WIDTH = canvas.width;
    const HEIGHT = canvas.height;
    console.log('WIDTH: ', WIDTH, 'HEIGHT: ', HEIGHT)

    const barWidth = (WIDTH / bufferLength) * 13;
    console.log('BARWIDTH: ', barWidth)

    console.log('TOTAL WIDTH: ', (117*10)+(118*barWidth)) // (total space between bars)+(total width of all bars)

    let barHeight;
    let x = 0;

  // Display array on time each 3 sec (just to debug)
  
   function renderFrame() {
      requestAnimationFrame(renderFrame);

      x = 0;

      analyser.getByteFrequencyData(dataArray); // Copies the frequency data into dataArray
      // Results in a normalized array of values between 0 and 255
      // Before this step, dataArray's values are all zeros (but with length of 8192)

      ctx.fillStyle = "rgba(0,0,0,0.2)"; // Clears canvas before rendering bars (black with opacity 0.2)
      ctx.fillRect(0, 0, WIDTH, HEIGHT); // Fade effect, set opacity to 1 for sharper rendering of bars

      let...