* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#play {
  width: 80px;
  z-index: 2;
  cursor: pointer;
}

#play:hover {
  opacity: 0.8;
}

#canvas {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 25px);
    height: calc(100% - 70px);
}

audio {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 25px);
  z-index: 3;
}

const canvas = document.getElementById("canvas");
const play = document.getElementById("play");
function createAudio() {
  const audio = new Audio();
  audio.src = "https://res.cloudinary.com/dbc8anjdo/video/upload/v1696842366/%ED%8A%B8%EB%A1%9C%ED%8A%B8%EC%95%A0%EC%B0%BD%EA%B3%A1/%ED%96%89%EB%B3%B5-%EC%B4%88%ED%9D%AC_juzmgi.mp3";
  audio.crossOrigin = "anonymous";
  audio.controls = true;
  document.querySelector("body").appendChild(audio);
  return audio;
}
function createCanvas() {
  const canvasCtx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  return canvasCtx;
}

function init() {
  play.remove();
  const canvasCtx = createCanvas();
  const audio = createAudio();

  const audioCtx = new AudioContext();
  let audioSrc = audioCtx.createMediaElementSource(audio);
const analyser = audioCtx.createAnalyser();
  analyser.fftSize = 4096;
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);
  audioSrc.connect(analyser);
  analyser.connect(audioCtx.destination);
  const barWidth = (canvas.width / bufferLength) * 2;
  let barHeight = 0;
  function renderFrame() {
    requestAnimationFrame(renderFrame);
    canvasCtx.fillStyle = "rgba(0,0,0,0.2)";
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
    let color = "rgb(0, 200, 255)";
    let bars = 160;
    analyser.getByteFrequencyData(dataArray);
    for (let i = 0; i < bars; i++) {
      barPosition = i * (barWidth + 5);
      barHeight = dataArray[i] * 2.5;
      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)";
      }
      canvasCtx.fillStyle = color;
      canvasCtx.fillRect(
        barPosition,
        canvas.height - barHeight*0.6,
        barWidth,
        barHeight
      );
    }
  }
audio.play();
renderFrame();
}

play.addEventListener("click", init);