Change scale according to gain input

src/World/Audio/AudioSystem.jsx

@@ -61,7 +61,14 @@ const AudioSystem = () => {
     <>
       <AudioControls />
       {sources.map((source, i) => {
-        return <AudioSphere key={i} audio={source.audio} info={source.info} />;
+        return (
+          <AudioSphere
+            key={i}
+            audio={source.audio}
+            info={source.info}
+            analyser={source.analyser}
+          />
+        );
       })}
     </>
   );

src/World/Audio/components/AudioSphere.jsx

@@ -6,14 +6,15 @@ import useInterface from '../../../stores/Interface';
 
 Globals.assign({ frameLoop: 'always' });
 
-const AudioSphere = ({ audio, info }) => {
+const AudioSphere = ({ audio, info, analyser }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const [gain, setGain] = useState(0);
   const { hovered } = useInterface();
   const ref = useRef();
   const rotationSpeed = useMemo(() => Math.random() - 0.5, []);
 
   const { scale } = useSpring({
-    scale: isHovered ? 1.2 : 1,
+    scale: isHovered ? 1.2 : 1 + gain,
     config: config.wobbly,
   });
 
@@ -25,6 +26,9 @@ const AudioSphere = ({ audio, info }) => {
 
   useFrame(({ clock }) => {
     ref.current.rotation.y = clock.getElapsedTime() * rotationSpeed;
+
+    // The value will be between 0 and 255
+    setGain(analyser.gain / 255);
   });
 
   useEffect(() => {
@@ -40,14 +44,13 @@ const AudioSphere = ({ audio, info }) => {
   }, [hovered, info.id]);
 
   return (
-    <animated.mesh
-      ref={ref}
-      position={[info.position.x, info.position.y, info.position.z]}
-      onClick={handleClick}
-      scale={scale}
-    >
+    <group position={[info.position.x, info.position.y, info.position.z]}>
+      <animated.mesh ref={ref} onClick={handleClick} scale={scale}>
+        <sphereGeometry args={[1, 32, 32]} />
+        <meshBasicMaterial color={info.color} wireframe />
+      </animated.mesh>
       <DREI.Html
-        position-y={info.position.y < 2 ? 1.5 : -1.5}
+        position-y={info.position.y < 2 ? 1.7 : -1.7}
         center
         distanceFactor={10}
       >
@@ -64,13 +67,7 @@ const AudioSphere = ({ audio, info }) => {
           <h3>{info.name}</h3>
         </div>
       </DREI.Html>
-
-      {/* <DREI.Text position-y={1.5} fontSize={0.4}>
-        {info.name}
-      </DREI.Text> */}
-      <sphereGeometry args={[1, 32, 32]} />
-      <meshBasicMaterial color={info.color} wireframe />
-    </animated.mesh>
+    </group>
   );
 };
 

src/stores/Atmoky.js

@@ -94,8 +94,9 @@ export default create((set, get) => ({
     renderer.externalizer.character.value = externalizerIntensity;
   },
 
+  // Create source
   createSource: (source, index) => {
-    const { audioContext, renderer, addSource } = get();
+    const { audioContext, renderer, addSource, createAnalyser } = get();
     const position = source.info.position;
     const audioElem = new Audio(source.src);
     audioElem.crossOrigin = 'anonymous';
@@ -105,15 +106,16 @@ export default create((set, get) => ({
 
     const audioElemSrc = audioContext.createMediaElementSource(audioElem);
 
+    const analyser = createAnalyser(audioElemSrc);
+
     let atmSource = renderer.createSource();
     atmSource.setInput(audioElemSrc);
     atmSource.setPosition(position.x, position.y, position.z);
 
-    // audioElem.play();
-
     addSource({
       audio: atmSource,
       audioElem: audioElem,
+      analyser: analyser,
       info: { ...source.info, id: index },
     });
   },
@@ -152,6 +154,7 @@ export default create((set, get) => ({
     }
   },
 
+  // Resume audio
   resumeAudio: () => {
     const { audioContext } = get();
     if (!audioContext) return;
@@ -162,6 +165,7 @@ export default create((set, get) => ({
       });
   },
 
+  // Pause audio
   pauseAudio: () => {
     const { audioContext } = get();
     if (audioContext.state === 'running')
@@ -177,6 +181,7 @@ export default create((set, get) => ({
     }
   },
 
+  // Randomize position for all sources
   randomizePositions: () => {
     const { sources, setSources } = get();
 
@@ -189,4 +194,60 @@ export default create((set, get) => ({
     });
     setSources(newSources);
   },
+
+  // Get an analyser for a source
+  createAnalyser: (source) => {
+    const { audioContext } = get();
+    const analyser = audioContext.createAnalyser();
+    const gainNode = audioContext.createGain();
+    analyser.fftSize = 64;
+    source.connect(analyser);
+    analyser.connect(gainNode);
+
+    // Create a script processor
+    let info = {};
+    const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+    scriptProcessor.onaudioprocess = () => {
+      // const buffer = new Float32Array(analyser.frequencyBinCount);
+      // analyser.getFloatFrequencyData(buffer);
+      // const gain = buffer.reduce((a, b) => a + b) / buffer.length;
+      // info.gain = gain;
+
+      const data = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(data);
+      const gain = data.reduce((a, b) => a + b) / data.length;
+      info.gain = gain;
+    };
+    gainNode.connect(scriptProcessor);
+    scriptProcessor.connect(audioContext.destination);
+
+    return info;
+  },
+
+  getAnalyser: (source) => {
+    console.log(source);
+    // Create an analyser with the Audio API
+    const { audioContext } = get();
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+
+    // Create a gain node
+    const gainNode = audioContext.createGain();
+    analyser.connect(gainNode);
+
+    // Create a script processor
+    const scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1);
+    scriptProcessor.onaudioprocess = () => {
+      const buffer = new Float32Array(analyser.frequencyBinCount);
+      analyser.getFloatFrequencyData(buffer);
+      const gain = buffer.reduce((a, b) => a + b) / buffer.length;
+      gainNode.gain.value = gain;
+      source.info.frequency = frequency;
+    };
+    gainNode.connect(scriptProcessor);
+    scriptProcessor.connect(audioContext.destination);
+
+    return gainNode;
+  },
 }));