dwu359
diff --git a/Collapse file
‎src/components/overlay.tsx‎
Copy file name to clipboardExpand all lines: src/components/overlay.tsx
+12-23Lines changed: 12 additions & 23 deletions b/Collapse file
‎src/components/overlay.tsx‎
Copy file name to clipboardExpand all lines: src/components/overlay.tsx
+12-23Lines changed: 12 additions & 23 deletions
diff --git a/Collapse file
‎src/pages/index.tsx‎
Copy file name to clipboardExpand all lines: src/pages/index.tsx
+12-2Lines changed: 12 additions & 2 deletions b/Collapse file
‎src/pages/index.tsx‎
Copy file name to clipboardExpand all lines: src/pages/index.tsx
+12-2Lines changed: 12 additions & 2 deletions
diff --git a/Collapse file
‎src/state/spiral.ts‎
Copy file name to clipboardExpand all lines: src/state/spiral.ts
+4-3Lines changed: 4 additions & 3 deletions b/Collapse file
‎src/state/spiral.ts‎
Copy file name to clipboardExpand all lines: src/state/spiral.ts
+4-3Lines changed: 4 additions & 3 deletions
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSpring, animated } from "react-spring";
 import useStartStore, { StartState } from "../state/start";
 import * as THREE from "three";
@@ -7,6 +7,7 @@ import { withPrefix } from "gatsby";
 import { AudioLoader, Camera } from "three";
 import { useLoader, useThree } from "@react-three/fiber";
 import { arrayBuffer } from "stream/consumers";
+import useSpiralStore from "../state/spiral";
 
 const Overlay = () => {
   //const startval = useAppSelector((state) => state.startReducer.startval);
@@ -74,28 +75,16 @@ const Overlay = () => {
               );
             };
             request.send();*/
-            for (let i = 0; i < 2; i++) {
-              loader.load(
-                withPrefix("/home-resonance.wav"),
-                (buffer) => {
-                  console.log("hi");
-                  console.log(buffer, "test");
-                  audio.setBuffer(buffer);
-                  audio.setLoop(true);
-                  audio.setVolume(0.5);
-                  const analyzer = new THREE.AudioAnalyser(audio, 2048);
-                  audioStore.addAudio(audio, listener, analyzer);
-                  //audio.play();
-                  //audio.pause();
-                },
-                (p) => {
-                  console.log(p);
-                },
-                (e) => {
-                  console.log(e);
-                }
-              );
-            }
+            loader.load(withPrefix("/home-resonance.wav"), (buffer) => {
+              console.log(buffer);
+              audio.setBuffer(buffer);
+              audio.setLoop(true);
+              audio.setVolume(0.5);
+              const analyzer = new THREE.AudioAnalyser(audio, 2048);
+              audioStore.addAudio(audio, listener, analyzer);
+              //audio.play();
+              //audio.pause();
+            });
 
             /*
             const audioElement = document.querySelector(
 
@@ -69,6 +69,7 @@ const IndexPage = () => {
       <div id="canvas-container">
         <Canvas camera={{ position: [0, 0, -2010], far: 1500 }}>
           <CameraControls />
+          <AudioStarter />
           {<color attach="background" args={["black"]} />}
           <App />
           {/*<ambientLight intensity={0.5} />*/}
@@ -111,7 +112,6 @@ const CameraControls = () => {
   const { camera } = useThree();
   const startStore = useStartStore();
   const spiralStore = useSpiralStore();
-  const audioStore = useAudioStore();
   /*
   const bool = useControls({
     bool: false,
@@ -131,7 +131,6 @@ const CameraControls = () => {
     },
     onRest: () => {
       if (!spiralStore.done) {
-        audioStore.play();
         spiralStore.notifyDone();
       }
     },
@@ -143,6 +142,17 @@ const CameraControls = () => {
   });
   return <OrbitControls enabled={true} maxDistance={750} />;
 };
+
+const AudioStarter = () => {
+  const audioStore = useAudioStore();
+  const spiralStore = useSpiralStore();
+  useEffect(() => {
+    if (audioStore.audio !== null && spiralStore.done) {
+      audioStore.play();
+    }
+  }, [audioStore.audio, spiralStore.done]);
+  return <></>;
+};
 function Light() {
   const light = useRef<DirectionalLight>(null!);
   useHelper(light, DirectionalLightHelper);
 
@@ -7,11 +7,12 @@ type SpiralType = {
 
 const useSpiralStore = create<SpiralType>((set) => ({
   done: false,
-  notifyDone: () =>
-    set((state) => ({
+  notifyDone: () => {
+    return set((state) => ({
       ...state,
       done: true,
-    })),
+    }));
+  },
 }));
 
 export default useSpiralStore;