"use client"; import React, { useRef, useEffect, useState, createContext, useContext, } from "react"; import type { ReactNode } from "react"; import * as THREE from "three"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Grid, Environment, Loader } from "@react-three/drei"; import { Mic, MicOff, X } from "lucide-react"; import { createNoise3D } from "simplex-noise"; interface AudioContextValue { running: boolean; analyser: AnalyserNode | null; data: Uint8Array; } const AudioCtx = createContext(null); export const useAudio = () => { const ctx = useContext(AudioCtx); if (!ctx) throw new Error("useAudio must be used inside AudioProvider"); return ctx; }; interface AudioProviderProps { running: boolean; children: ReactNode; } export function AudioProvider({ running, children }: AudioProviderProps) { const [analyser, setAnalyser] = useState(null); const [data] = useState(new Uint8Array(256)); const ctxRef = useRef(null); const streamRef = useRef(null); useEffect(() => { if (!running) { if (streamRef.current) { streamRef.current.getTracks().forEach((t) => t.stop()); streamRef.current = null; } if (ctxRef.current) { ctxRef.current.close(); ctxRef.current = null; } setAnalyser(null); return; } const start = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true, }); const c = new AudioContext(); const src = c.createMediaStreamSource(stream); const an = c.createAnalyser(); an.fftSize = 512; an.smoothingTimeConstant = 0.8; src.connect(an); setAnalyser(an); ctxRef.current = c; streamRef.current = stream; } catch (e) { console.error("Microphone access denied", e); } }; start(); }, [running]); return ( {children} ); } interface AudioVisualizerSphereProps { color?: string; } const noise3D = createNoise3D(); export function AudioVisualizerSphere({ color = "#0a0a0a", }: AudioVisualizerSphereProps) { const { running, analyser, data } = useAudio(); const ref = useRef(null!); const baseDirs = useRef([]); const bassRef = useRef(0); const treRef = useRef(0); useEffect(() => { if (ref.current && baseDirs.current.length === 0) { const pos = (ref.current.geometry as THREE.SphereGeometry).attributes .position; for (let i = 0; i < pos.count; i++) { const v = new THREE.Vector3( pos.getX(i), pos.getY(i), pos.getZ(i) ).normalize(); baseDirs.current.push(v); } } }, []); useFrame(() => { const mesh = ref.current; if (!mesh || baseDirs.current.length === 0) return; const geo = mesh.geometry as THREE.SphereGeometry; const pos = geo.attributes.position; const t = performance.now(); if (!running || !analyser) { bassRef.current = THREE.MathUtils.lerp(bassRef.current, 0, 0.15); treRef.current = THREE.MathUtils.lerp(treRef.current, 0, 0.15); } else { analyser.getByteFrequencyData(data as unknown as Uint8Array); const half = data.length / 2; const lower = data.slice(0, half); const upper = data.slice(half); const bass = Math.max(...lower) / 256; const treble = upper.reduce((a, b) => a + b, 0) / (upper.length * 256); bassRef.current = THREE.MathUtils.lerp(bassRef.current, bass * 4, 0.08); treRef.current = THREE.MathUtils.lerp(treRef.current, treble * 1.2, 0.08); } for (let i = 0; i < pos.count; i++) { const dir = baseDirs.current[i]; const blobNoise = noise3D( dir.x * 1.5 + t * 0.0002, dir.y * 1.5, dir.z * 1.5 ); const audioNoise = noise3D( dir.x + t * 0.001, dir.y + t * 0.001, dir.z + t * 0.001 ); const d = 5 + blobNoise * 0.6 + bassRef.current + audioNoise * 7 * treRef.current; pos.setXYZ(i, dir.x * d, dir.y * d, dir.z * d); } pos.needsUpdate = true; geo.computeVertexNormals(); }); return ( ); } interface AudioVisualizerGridProps extends Partial> { enabled?: boolean; } export function AudioVisualizerGrid({ enabled = true, ...props }: AudioVisualizerGridProps) { if (!enabled) return null; return ( ); } export function AudioVisualizerFloor() { return ( ); } interface ControlsProps { rec: boolean; toggle: () => void; cancel: () => void; } const Controls: React.FC = ({ rec, toggle, cancel }) => (

); interface AudioVisualizerExperienceProps { background?: string; sphereColor?: string; showGrid?: boolean; orbitProps?: Partial>; envProps?: Partial>; gridProps?: Partial>; } export function AudioVisualizerExperience({ background = "#000000", sphereColor = "#0a0a0a", showGrid = true, orbitProps = {}, envProps = {}, gridProps = {}, }: AudioVisualizerExperienceProps) { const [rec, setRec] = useState(false); return (

setRec(!rec)} cancel={() => setRec(false)} />

); }

Audio Visualizer

Installation