script.js

// Pegamos os elementos
const canvas = document.getElementById("canvas");
const play = document.getElementById("play");

function createAudio() {
  const audio = new Audio();
  audio.src = "https://willianjusten-assets.s3.us-east-2.amazonaws.com/agnes-obel-familiar.mp3";
  audio.crossOrigin = "anonymous";
  audio.controls = true;

  // adicionamos o player na tela
  document.querySelector("body").appendChild(audio);

  // retornamos o audio para ser trabalhado
  return audio;
}

function createCanvas() {
  const canvasCtx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  return canvasCtx;
}

function init() {
  // removemos o botão de play
  play.remove();

  // criamos nosso canvas e salvamos o contexto
  const canvasCtx = createCanvas();

  // criamos o player de audio
  const audio = createAudio();

  // criamos um contexto de audio para analisar
  const audioCtx = new AudioContext();
  let audioSrc = audioCtx.createMediaElementSource(audio);

  // criamos um analisador para as ondas de audio
  // e definimos o tamanho do FFT (múltiplos de 2, brinque! 1024/2048...)
  const analyser = audioCtx.createAnalyser();
  analyser.fftSize = 4096;

  // definimos o array de frequências
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  // conectamos o audio ao analyser
  audioSrc.connect(analyser);

  // conectamos a saída do analyser para o destino final (Fone/caixas de som)
  analyser.connect(audioCtx.destination);

  // definimos largura, altura iniciais da barra
  const barWidth = (canvas.width / bufferLength) * 13;
  let barHeight = 0;

  function renderFrame() {
    // função recursiva para renderizar nosso visualizer
    requestAnimationFrame(renderFrame);

    // preenchendo o nosso canvas todo com opacidade para dar sensação de "tremido"
    canvasCtx.fillStyle = "rgba(0,0,0,0.2)";
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

    // cor inicial da barra e a quantidade de barras (brinque!)
    let color = "rgb(0, 200, 255)";
    let bars = 100;

    // pegando a frequência no frame da animação
    analyser.getByteFrequencyData(dataArray);

    // para cada barrinha, nós preenchemos na tela
    for (let i = 0; i < bars; i++) {
      barPosition = i * (barWidth + 10);
      barHeight = dataArray[i] * 2.5;

      // de acordo com a frequência mudamos as cores
      if (dataArray[i] > 210) {
        color = "rgb(250, 0, 255)";
      } else if (dataArray[i] > 200) {
        color = "rgb(250, 255, 0)";
      } else {
        color = "rgb(0, 200, 255)";
      }

      // criação da barrinha na sua posição e altura corretas
      canvasCtx.fillStyle = color;
      canvasCtx.fillRect(
        barPosition,
        canvas.height - barHeight,
        barWidth,
        barHeight
      );
    }
  }

  // toca a música e inicia a animação
  audio.play();
  renderFrame();
}

play.addEventListener("click", init);