script.js

let audioAnalyser, freqArray;
function visualize(){
    //setup Web Audio API 
    let audio = new Audio();
    let audioContext = new (window.AudioContext || window.webkitAudioContext);

    audioAnalyser = audioContext.createAnalyser();
    audio.src = "tracks/bensound-creativeminds.mp3";
    let source = audioContext.createMediaElementSource(audio);
    source.connect(audioAnalyser);
    audioAnalyser.connect(audioContext.destination);

    freqArray = new Uint8Array(audioAnalyser.frequencyBinCount);

    document.getElementById("play").style.display = "none";
    audio.play();
    animate();
}

function animate(){
    //setup the canvas
    let canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvasContext = canvas.getContext("2d");

    //center of the circle
    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;
    let radius = 200;

    //background styling
    let gradient = canvasContext.createLinearGradient(0, 0, 0, canvas.height); //x1, y1, x2, y2
    gradient.addColorStop(0, "rgba(26, 13, 21, 1)")  //offset, color
    gradient.addColorStop(1, "rgba(36, 45, 33, 1)")  //offset, color
    canvasContext.fillStyle = gradient;
    canvasContext.fillRect(0, 0, canvas.width, canvas.height);

    //Draw the circle
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0, 2*Math.PI);
    canvasContext.stroke();

    const bars = 250;
    const theta = 2*Math.PI / bars;
    audioAnalyser.getByteFrequencyData(freqArray);
    for(let i = 0; i<bars; ++i){
        let barHeight = freqArray[i]*0.62;

        //start point
        let startX = centerX + radius*Math.cos(theta*i);
        let startY = centerY + radius*Math.sin(theta*i);

        //endpoint
        let endX = centerX + (radius+barHeight)*Math.cos(theta*i);
        let endY = centerY + (radius+barHeight)*Math.sin(theta*i);

        //draw that bar
        drawBar(startX, startY, endX, endY, freqArray[i], canvasContext);
    }

    window.requestAnimationFrame(animate);
}

function drawBar(startX, startY, endX, endY, freq, canvasContext){
    let barColor = "rgba(" + freq + ", " + freq + ", " + 205 + ")";
    const barWidth = 2;

    canvasContext.strokeStyle = barColor;
    canvasContext.lineWidth = barWidth;
    canvasContext.beginPath();
    canvasContext.moveTo(startX, startY);
    canvasContext.lineTo(endX, endY);
    canvasContext.stroke();
}