3D Audio Visualizer

The AudioVisualizer3D component mounts a React Three Fiber canvas and uses the browser's native AnalyserNode (Web Audio API) to generate a real-time reactive 3D mesh.

It maps the low-end frequencies (bass) to dynamically scale the sphere, and maps the high-end frequencies to distort the mesh using organic noise parameters.

Live Preview

Installation

[!WARNING] WebGL components require a lot of processing power. Do not mount multiple AudioVisualizer3D components on the same page at the same time unless absolutely necessary.

Also, if you are passing external audio URLs, the server hosting the audio must provide proper CORS headers, otherwise the browser will block the MediaElementSource from reading the frequency data!

Usage Guide

1. Import the Component

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

import { AudioVisualizer3D } from "@/components/creative/audio-visualizer-3d";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { AudioVisualizer3D } from "@/components/creative/audio-visualizer-3d";

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