const fftSize = 512; // Determines the number of waves (frequency bins)
const visualizer = document.getElementById("visualizer");
const startButton = document.getElementById("startButton");

let audioContext, analyser, dataArray;

// Initialize the microphone input and analyzer
async function initAudioAnalyzer() {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  analyser = audioContext.createAnalyser();
  analyser.fftSize = fftSize;

  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const source = audioContext.createMediaStreamSource(stream);
  source.connect(analyser);

  dataArray = new Uint8Array(analyser.frequencyBinCount);
  createWaves();
  animate();
}

// Create visualizer bars based on the frequencyBinCount
function createWaves() {
  const numWaves = analyser.frequencyBinCount;
  for (let i = 0; i < numWaves; i++) {
    const bar = document.createElement("div");
    visualizer.appendChild(bar);
  }
}

// Animate the waves based on frequency data
function animate() {
  analyser.getByteFrequencyData(dataArray);

  const bars = visualizer.children;
  for (let i = 0; i < bars.length; i++) {
    const value = dataArray[i];
    bars[i].style.height = `${(value / 255) * 100}%`; // Scale height based on frequency data
  }

  requestAnimationFrame(animate);
}

startButton.addEventListener("click", async () => {
  if (!audioContext) {
    await initAudioAnalyzer();
  }
  audioContext.resume();
});