Audio Visualizer Canvas

Installation

Architecture

This component is built directly on top of the browser's native Web Audio API and bypasses heavy 3rd-party audio libraries entirely.

1. Initialization: Due to modern browser autoplay policies, the AudioContext is strictly instantiated only after the user clicks the central Play button.
2. Analysis: It routes the <audio> source through an AnalyserNode with an fftSize of 256, giving us 128 usable frequency bins.
3. Canvas Drawing: In a highly optimized requestAnimationFrame loop, we extract the Uint8Array frequency data and draw glowing vector lines distributed evenly in a circle around the center point.
4. DPI Scaling: It natively supports high-DPI (Retina) displays by scaling the canvas matrix to the window.devicePixelRatio.

Note: Ensure your audio files are served with proper CORS headers if they are hosted on a different domain, otherwise the Web Audio API will be blocked from reading the frequency data!

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { AudioVisualizer } from "@/components/creative/audio-visualizer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AudioVisualizer } from "@/components/creative/audio-visualizer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AudioVisualizer
        audioUrl="example"
        color="example"
      />
    </div>
  );
}