Fix: Properly handle async play() and remove autoPlay conflict

2025-11-25 15:28:22 +01:00
parent f8b5dcf300
commit 9bf7e72a6c
2 changed files with 18 additions and 8 deletions
--- a/components/AudioPlayer.tsx
+++ b/components/AudioPlayer.tsx
@@ -53,13 +53,23 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
    // Expose play method to parent component
    useImperativeHandle(ref, () => ({
        play: () => {
-            if (!audioRef.current || isPlaying) return;
-            audioRef.current.play();
-            setIsPlaying(true);
-            onPlay?.();
-            if (!hasPlayedOnce) {
-                setHasPlayedOnce(true);
-                onHasPlayedChange?.(true);
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
+                        setIsPlaying(true);
+                        onPlay?.();
+                        if (!hasPlayedOnce) {
+                            setHasPlayedOnce(true);
+                            onHasPlayedChange?.(true);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
            }
        }
    }));