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;

components/Game.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
-import AudioPlayer from './AudioPlayer';
+import AudioPlayer, { AudioPlayerRef } from './AudioPlayer';
 import GuessInput from './GuessInput';
 import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
@@ -38,6 +38,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const [hasRated, setHasRated] = useState(false);
     const [showYearModal, setShowYearModal] = useState(false);
     const [hasPlayedAudio, setHasPlayedAudio] = useState(false);
+    const audioPlayerRef = useRef<AudioPlayerRef>(null);
 
     useEffect(() => {
         const updateCountdown = () => {
@@ -119,7 +120,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
 
     const handleStartAudio = () => {
         // This will be called when user clicks "Start" button on first attempt
-        // We'll trigger the audio player programmatically
+        // Trigger the audio player to start playing
+        audioPlayerRef.current?.play();
         setHasPlayedAudio(true);
     };
 
@@ -265,6 +267,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                     <ScoreDisplay score={gameState.score} breakdown={gameState.scoreBreakdown} />
 
                     <AudioPlayer
+                        ref={audioPlayerRef}
                         src={dailyPuzzle.audioUrl}
                         unlockedSeconds={unlockedSeconds}
                         startTime={dailyPuzzle.startTime}