index_early.html

<!DOCTYPE html>
<html>

<head>
<style>
body {
  background-color: coral;
  margin: 0;
}

.visualiser-container {
    position: relative;
    margin-top: 100px;
    width: 100%;
    height: 200px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#playhead {
    position: absolute;
    top: 0;
    width: 2px;
    height: 200px;
    background: white;
    z-index: 2;
}
</style>
</head>

<body>  

<audio id="audio" src="audio_test.mp3" controls style="position:absolute; z-index:3;"></audio>

<div class="visualiser-container">
    <canvas id="spectrogram"></canvas>
    <div id="playhead"></div>
</div>

<script>

(function() {

    const audio = document.getElementById("audio");

    const canvas = document.getElementById("spectrogram");
    const ctx = canvas.getContext("2d");

    const playhead = document.getElementById("playhead");

    canvas.width = window.innerWidth;
    canvas.height = 200;

    const audioCtx = new AudioContext();
    const source = audioCtx.createMediaElementSource(audio);
    const analyser = audioCtx.createAnalyser();

    analyser.fftSize = 1024;
    analyser.smoothingTimeConstant = 0;

    source.connect(analyser);
    source.connect(audioCtx.destination);

    const freqData = new Uint8Array(analyser.frequencyBinCount);

    let x = 0;

    function drawSpectrogram() {
        requestAnimationFrame(drawSpectrogram);

        if (audio.paused) return;

        analyser.getByteFrequencyData(freqData);

        // shift canvas left
        const imageData = ctx.getImageData(1, 0, canvas.width - 1, canvas.height);
        ctx.putImageData(imageData, 0, 0);

        // draw new slice on right
        for (let i = 0; i < freqData.length; i++) {

            const value = freqData[i];
            const percent = value / 255;

            // log scale (important)
            const logIndex = Math.log10(1 + 9 * (i / freqData.length));
            const y = canvas.height - logIndex * canvas.height;

            const hue = 240 - percent * 240;

            ctx.fillStyle = `hsl(${hue}, 100%, ${percent * 50}%)`;

            ctx.fillRect(
                canvas.width - 1,
                y,
                1,
                canvas.height / freqData.length
            );
        }
    }

    function animatePlayhead() {
        function frame() {
            if (!audio.duration) return;

            const percent = audio.currentTime / audio.duration;
            playhead.style.left = (percent * canvas.width) + "px";

            if (!audio.paused) requestAnimationFrame(frame);
        }
        frame();
    }

    audio.addEventListener("play", () => {
        audioCtx.resume();
        drawSpectrogram();
        animatePlayhead();
    });

})();
</script>

</body>
</html>