Audio Visualizer

1"use client";
2import React, {
3  useRef,
4  useEffect,
5  useState,
6  createContext,
7  useContext,
8} from "react";
9import type { ReactNode } from "react";
10import * as THREE from "three";
11import { Canvas, useFrame } from "@react-three/fiber";
12import { OrbitControls, Grid, Environment, Loader } from "@react-three/drei";
13import {
14  Mic01Icon,
15  MicOff01Icon,
16  Cancel01Icon,
17} from "@hugeicons/core-free-icons";
18import { HugeiconsIcon } from "@hugeicons/react";
19import { createNoise3D } from "simplex-noise";
20 
21interface AudioContextValue {
22  running: boolean;
23  analyser: AnalyserNode | null;
24  data: Uint8Array;
25}
26 
27const AudioCtx = createContext<AudioContextValue | null>(null);
28 
29export const useAudio = () => {
30  const ctx = useContext(AudioCtx);
31  if (!ctx) throw new Error("useAudio must be used inside AudioProvider");
32  return ctx;
33};
34 
35interface AudioProviderProps {
36  running: boolean;
37  children: ReactNode;
38}
39 
40export function AudioProvider({ running, children }: AudioProviderProps) {
41  const [analyser, setAnalyser] = useState<AnalyserNode | null>(null);
42  const [data] = useState<Uint8Array>(new Uint8Array(256));
43  const ctxRef = useRef<AudioContext | null>(null);
44  const streamRef = useRef<MediaStream | null>(null);
45 
46  useEffect(() => {
47    if (!running) {
48      if (streamRef.current) {
49        streamRef.current.getTracks().forEach((t) => t.stop());
50        streamRef.current = null;
51      }
52      if (ctxRef.current) {
53        ctxRef.current.close();
54        ctxRef.current = null;
55      }
56      setAnalyser(null);
57      return;
58    }
59 
60    const start = async () => {
61      try {
62        const stream = await navigator.mediaDevices.getUserMedia({
63          audio: true,
64        });
65        const c = new AudioContext();
66        const src = c.createMediaStreamSource(stream);
67        const an = c.createAnalyser();
68        an.fftSize = 512;
69        an.smoothingTimeConstant = 0.8;
70        src.connect(an);
71        setAnalyser(an);
72        ctxRef.current = c;
73        streamRef.current = stream;
74      } catch (e) {
75        console.error("Microphone access denied", e);
76      }
77    };
78    start();
79  }, [running]);
80 
81  return (
82    <AudioCtx.Provider value={{ running, analyser, data }}>
83      {children}
84    </AudioCtx.Provider>
85  );
86}
87 
88interface AudioVisualizerSphereProps {
89  color?: string;
90}
91 
92const noise3D = createNoise3D();
93 
94export function AudioVisualizerSphere({
95  color = "#0a0a0a",
96}: AudioVisualizerSphereProps) {
97  const { running, analyser, data } = useAudio();
98// … truncated