feat: integrate WebSocket for sound playback and error handling in SoundsPage

src/pages/SoundsPage.tsx

@@ -19,6 +19,7 @@ import {
 } from '@/lib/api/services/sounds'
 import { favoritesService } from '@/lib/api/services/favorites'
 import { SOUND_EVENTS, soundEvents } from '@/lib/events'
+import { useSocket } from '@/contexts/SocketContext'
 import {
   AlertCircle,
   Heart,
@@ -78,6 +79,7 @@ const darkModeColors = [
 ]
 
 export function SoundsPage() {
+  const { socket, isConnected } = useSocket()
   const [sounds, setSounds] = useState<Sound[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -90,6 +92,14 @@ export function SoundsPage() {
   const [showFavoritesOnly, setShowFavoritesOnly] = useState(false)
 
   const handlePlaySound = async (sound: Sound) => {
+    // If WebSocket is connected, use WebSocket for immediate response
+    if (socket && isConnected) {
+      socket.emit('play_sound', { sound_id: sound.id })
+      toast.success(`Playing: ${sound.name || sound.filename}`)
+      return
+    }
+    
+    // Fallback to HTTP request if WebSocket is not available
     try {
       await soundsService.playSound(sound.id)
       toast.success(`Playing: ${sound.name || sound.filename}`)
@@ -201,6 +211,21 @@ export function SoundsPage() {
     }
   }, [])
 
+  // Listen for WebSocket play sound errors
+  useEffect(() => {
+    if (!socket) return
+
+    const handleSoundPlayError = (data: { sound_id: number; error: string }) => {
+      toast.error(`Failed to play sound: ${data.error}`)
+    }
+
+    socket.on('sound_play_error', handleSoundPlayError)
+
+    return () => {
+      socket.off('sound_play_error', handleSoundPlayError)
+    }
+  }, [socket])
+
   // Listen for sound_favorited events and update favorite status and count
   useEffect(() => {
     const handleSoundFavorited = (...args: unknown[]) => {