Fix: Start button now actually starts audio playback

components/AudioPlayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 
 interface AudioPlayerProps {
     src: string;
@@ -12,7 +12,11 @@ interface AudioPlayerProps {
     onHasPlayedChange?: (hasPlayed: boolean) => void;
 }
 
-export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }: AudioPlayerProps) {
+export interface AudioPlayerRef {
+    play: () => void;
+}
+
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlockedSeconds, startTime = 0, onPlay, onReplay, autoPlay = false, onHasPlayedChange }, ref) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const [progress, setProgress] = useState(0);
@@ -46,6 +50,20 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
         }
     }, [src, unlockedSeconds, startTime, autoPlay]);
 
+    // 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);
+            }
+        }
+    }));
+
     const togglePlay = () => {
         if (!audioRef.current) return;
 
@@ -116,4 +134,8 @@ export default function AudioPlayer({ src, unlockedSeconds, startTime = 0, onPla
             </div>
         </div>
     );
-}
+});
+
+AudioPlayer.displayName = 'AudioPlayer';
+
+export default AudioPlayer;