wip

src/components/intro/Intro.tsx

@@ -41,40 +41,49 @@ const IntroScene: FC<IntroSceneProps> = ({
 }) => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
-  const handleContinue = () => {
-    setNextScene();
-  };
-
   useEffect(() => {
-    
-    let audio: HTMLAudioElement | undefined;
-    
-    if (language === 'en') {
-      audio = new Audio('/sounds/intro_en.mp3');
-    } else if (language === 'fr') {
-      audio = new Audio('/sounds/intro_fr.mp3');
-    } else if (language === 'es') {
-      audio = new Audio('/sounds/intro_es.mp3');
-    }
+    const audio = new Audio();
+    audio.id = 'introAudio';
+    document.body.appendChild(audio);
+    audioRef.current = audio;
 
-    if (!audio) return;  // Add early return if no audio is set
+    const loadAndPlayAudio = async () => {
+      try {
+        if (language === 'en') {
+          audio.src = '/sounds/intro_en.mp3';
+        } else if (language === 'fr') {
+          audio.src = '/sounds/intro_fr.mp3';
+        } else if (language === 'es') {
+          audio.src = '/sounds/intro_es.mp3';
+        }
 
-    const playAudio = () => {
-      audio.play().catch(error => {
+        await audio.load();
+        await audio.play();
+      } catch (error) {
         console.log('Audio playback error:', error);
-      });
+      }
     };
 
-    audio.addEventListener('canplaythrough', playAudio, { once: true });
+    loadAndPlayAudio();
 
     return () => {
-      audio.removeEventListener('canplaythrough', playAudio);
       if (audioRef.current) {
         audioRef.current.pause();
-        audioRef.current.currentTime = 0;
+        document.body.removeChild(audioRef.current);
+        audioRef.current = null;
       }
     };
-  }, []);
+  }, [language]);
+
+  const handleContinue = () => {
+    console.log('handleContinue:')
+    if (audioRef.current) {
+      audioRef.current.pause();
+      document.body.removeChild(audioRef.current);
+      audioRef.current = null;
+    }
+    setNextScene();
+  };
 
   return (
     <div className="relative w-screen h-screen">
@@ -96,7 +105,7 @@ const IntroScene: FC<IntroSceneProps> = ({
           </p>
 
           <button
-            onClick={handleContinue}
+            onClick={() => handleContinue()}
             className={`px-8 py-4 text-xl font-bold text-white rounded-lg transition-colors roboto-slab
               ${story ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 cursor-not-allowed'}`}
             disabled={!story}