fix: connect MiniPlayer controls and improve playback synchronization

- Connect MiniPlayer play/pause buttons to audioService
- Improve audio context management with fallback creation
- Fix state synchronization with interval-based readiness checks
- Add error handling and user feedback for playback issues
- Enhance mobile browser support with better audio context handling

Fixes playback issues in SongView where controls were not working and
state synchronization between UI and player was unreliable.

web/src/hooks/useWaveform.ts

@@ -26,6 +26,7 @@ export function useWaveform(
   const [isReady, setIsReady] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
+  const [error, setError] = useState<string | null>(null);
   const markersRef = useRef<CommentMarker[]>([]);
   
   // Global player state - use shallow comparison to reduce re-renders
@@ -98,13 +99,16 @@ export function useWaveform(
           
 
           
-          // Wait a moment for the waveform to be ready
-          setTimeout(() => {
-            audioService.play();
-            if (globalCurrentTime > 0) {
-              audioService.seekTo(globalCurrentTime);
+          // Wait for the waveform to be ready and audio context to be available
+          const checkReady = setInterval(() => {
+            if (audioService.getDuration() > 0) {
+              clearInterval(checkReady);
+              audioService.play();
+              if (globalCurrentTime > 0) {
+                audioService.seekTo(globalCurrentTime);
+              }
             }
-          }, 100);
+          }, 50);
         }
         
         setIsReady(true);
@@ -119,6 +123,7 @@ export function useWaveform(
       } catch (error) {
         console.error('useWaveform: initialization failed', error);
         setIsReady(false);
+        setError(error instanceof Error ? error.message : 'Failed to initialize audio');
         return () => {};
       }
     };
@@ -211,7 +216,7 @@ export function useWaveform(
     markersRef.current = [];
   };
 
-  return { isPlaying, isReady, currentTime, duration, play, pause, seekTo, addMarker, clearMarkers };
+  return { isPlaying, isReady, currentTime, duration, play, pause, seekTo, addMarker, clearMarkers, error };
 }
 
 function formatTime(seconds: number): string {