feat: Implement robust audio playback error handling with retry logic and improve search relevance scoring.

thakurdotdev · thakurdotdev · commit afd0912f5a58 · 2026-03-15T00:28:44.000+05:30
diff --git a/client/src/Context/PlayerContext.jsx b/client/src/Context/PlayerContext.jsx
@@ -9,12 +9,17 @@ export function PlayerProvider({ children }) {
   const nextAudioRef = useRef(null)
   const prevSongIdRef = useRef(null)
   const lastUpdateTime = useRef(0)
+  const retryCountRef = useRef(0)
+  const retryTimerRef = useRef(null)
+  const MAX_RETRIES = 3
 
   const setAudioRefs = usePlayerStore((s) => s.setAudioRefs)
   const loadAndPlayCurrentSong = usePlayerStore((s) => s.loadAndPlayCurrentSong)
   const handleNextSong = usePlayerStore((s) => s.handleNextSong)
   const updateTime = usePlayerStore((s) => s.updateTime)
   const setDuration = usePlayerStore((s) => s.setDuration)
+  const setPlaying = usePlayerStore((s) => s.setPlaying)
+  const setLoading = usePlayerStore((s) => s.setLoading)
   const setUserPlaylist = usePlayerStore((s) => s.setUserPlaylist)
   const decrementSongsRemaining = usePlayerStore((s) => s.decrementSongsRemaining)
 
@@ -37,13 +42,21 @@ export function PlayerProvider({ children }) {
     }
   }, [setAudioRefs])
 
+  useEffect(() => {
+    retryCountRef.current = 0
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }, [currentSong?.id])
+
   useEffect(() => {
     const audio = audioRef.current
     if (!audio) return
 
     const handleTimeUpdate = () => {
       const now = Date.now()
-      if (now - lastUpdateTime.current > 1000) {
+      if (now - lastUpdateTime.current > 500) {
         updateTime(audio.currentTime)
         lastUpdateTime.current = now
       }
@@ -58,16 +71,82 @@ export function PlayerProvider({ children }) {
       handleNextSong(true)
     }
 
+    const handleError = () => {
+      if (!audio.src || audio.src === window.location.href) return
+
+      if (retryCountRef.current < MAX_RETRIES) {
+        retryCountRef.current += 1
+        const delay = Math.pow(2, retryCountRef.current) * 500
+        console.warn(`Audio error, retrying (${retryCountRef.current}/${MAX_RETRIES}) in ${delay}ms`)
+        setLoading(true)
+
+        const savedTime = audio.currentTime || 0
+        const savedSrc = audio.src
+
+        retryTimerRef.current = setTimeout(() => {
+          retryTimerRef.current = null
+          audio.src = savedSrc
+          audio.load()
+
+          const onCanPlayRetry = () => {
+            audio.removeEventListener("canplay", onCanPlayRetry)
+            if (savedTime > 0) {
+              audio.currentTime = savedTime
+            }
+            audio.play().catch(() => {
+              setPlaying(false)
+              setLoading(false)
+            })
+          }
+          audio.addEventListener("canplay", onCanPlayRetry)
+        }, delay)
+      } else {
+        console.error(`Audio failed after ${MAX_RETRIES} retries`)
+        setPlaying(false)
+        setLoading(false)
+      }
+    }
+
+    const handlePause = () => {
+      if (!audio.ended) {
+        setPlaying(false)
+      }
+    }
+
+    const handlePlaying = () => {
+      retryCountRef.current = 0
+      setPlaying(true)
+      setLoading(false)
+    }
+
+    const handleWaiting = () => {
+      setLoading(true)
+    }
+
+    const handleCanPlay = () => {
+      setLoading(false)
+    }
+
     audio.addEventListener("timeupdate", handleTimeUpdate)
     audio.addEventListener("loadedmetadata", handleLoadedMetadata)
     audio.addEventListener("ended", handleEnded)
+    audio.addEventListener("error", handleError)
+    audio.addEventListener("pause", handlePause)
+    audio.addEventListener("playing", handlePlaying)
+    audio.addEventListener("waiting", handleWaiting)
+    audio.addEventListener("canplay", handleCanPlay)
 
     return () => {
       audio.removeEventListener("timeupdate", handleTimeUpdate)
       audio.removeEventListener("loadedmetadata", handleLoadedMetadata)
       audio.removeEventListener("ended", handleEnded)
+      audio.removeEventListener("error", handleError)
+      audio.removeEventListener("pause", handlePause)
+      audio.removeEventListener("playing", handlePlaying)
+      audio.removeEventListener("waiting", handleWaiting)
+      audio.removeEventListener("canplay", handleCanPlay)
     }
-  }, [handleNextSong, volume, updateTime, setDuration])
+  }, [handleNextSong, volume, updateTime, setDuration, setPlaying, setLoading])
 
   useEffect(() => {
     const loadSong = async () => {
@@ -82,6 +161,17 @@ export function PlayerProvider({ children }) {
     }
   }, [currentSong?.id, decrementSongsRemaining])
 
+  useEffect(() => {
+    const saveTimeOnUnload = () => {
+      const time = audioRef.current?.currentTime
+      if (time > 0) {
+        localStorage.setItem("player-time", String(time))
+      }
+    }
+    window.addEventListener("beforeunload", saveTimeOnUnload)
+    return () => window.removeEventListener("beforeunload", saveTimeOnUnload)
+  }, [])
+
   return (
     <>
       {children}
diff --git a/client/src/stores/playerStore.js b/client/src/stores/playerStore.js
@@ -6,6 +6,7 @@ import axios from "axios"
 
 let audioElement = null
 let nextAudioElement = null
+const TIME_STORAGE_KEY = "player-time"
 
 const getAudioUrl = (song) => {
   return song?.download_url?.[4]?.link || song?.download_url?.[3]?.link || ""
@@ -48,7 +49,7 @@ export const usePlayerStore = create(
         if (!isInQueue) {
           set({ playlist: [secureAudio] })
         }
-        set({ currentSong: secureAudio, isLoading: false })
+        set({ currentSong: secureAudio, isLoading: false, currentTime: 0, duration: 0 })
       },
 
       stopSong: () => {
@@ -66,10 +67,16 @@ export const usePlayerStore = create(
         if (!audioElement) return
         if (isPlaying) {
           audioElement.pause()
+          set({ isPlaying: false })
         } else {
-          audioElement.play().catch(console.error)
+          audioElement
+            .play()
+            .then(() => set({ isPlaying: true }))
+            .catch((err) => {
+              console.error("Play failed:", err)
+              set({ isPlaying: false })
+            })
         }
-        set({ isPlaying: !isPlaying })
       },
 
       setPlaying: (isPlaying) => set({ isPlaying }),
@@ -332,24 +339,28 @@ export const usePlayerStore = create(
           return prevSongId
         }
         try {
+          set({ isLoading: true })
           audioElement.src = getAudioUrl(currentSong)
-          await audioElement.load()
 
           if (!_hasRestoredTime && currentTime > 0) {
             audioElement.currentTime = currentTime
-            set({ _hasRestoredTime: true })
+            set({ _hasRestoredTime: true, isLoading: false })
           } else {
+            set({ currentTime: 0 })
             await audioElement.play()
-            set({ isPlaying: true, _hasRestoredTime: true })
+            set({ isPlaying: true, _hasRestoredTime: true, isLoading: false })
             addToHistory(currentSong, 0, "autoplay")
           }
 
           updateMediaSession(currentSong)
           preloadNextTrack()
           return currentSong.id
         } catch (err) {
+          if (err.name === "AbortError") {
+            return prevSongId
+          }
           console.error("Playback error:", err)
-          set({ isPlaying: false })
+          set({ isPlaying: false, isLoading: false })
           return prevSongId
         }
       },
@@ -361,14 +372,19 @@ export const usePlayerStore = create(
         playlist: state.playlist,
         originalPlaylist: state.originalPlaylist,
         volume: state.volume,
-        currentTime: state.currentTime,
         shuffleMode: state.shuffleMode,
         repeatMode: state.repeatMode,
       }),
       onRehydrateStorage: () => (state) => {
         if (state) {
           state.isPlaying = false
           state.isLoading = false
+          try {
+            const savedTime = parseFloat(localStorage.getItem(TIME_STORAGE_KEY))
+            if (savedTime > 0) {
+              state.currentTime = savedTime
+            }
+          } catch {}
         }
       },
     },
diff --git a/server/controllers/music/searchController.js b/server/controllers/music/searchController.js
@@ -3,7 +3,6 @@ const { Op } = require("sequelize")
 const sequelize = require("../../utils/sequelize")
 
 const SONG_API_URL = process.env.SONG_API_URL || "https://song.thakur.dev"
-const MIN_DB_RESULTS = 5
 
 async function fetchExternalSearch(query, limit = 30) {
   try {
@@ -18,6 +17,35 @@ async function fetchExternalSearch(query, limit = 30) {
   }
 }
 
+function computeRelevanceScore(song, query) {
+  const q = query.toLowerCase()
+  const name = (song.name || "").toLowerCase()
+  const artist = (song.artist_map?.artists?.map((a) => a.name).join(" ") || "").toLowerCase()
+  const album = (song.album || "").toLowerCase()
+
+  const exactName = name === q ? 1.0 : 0
+  const startsWithName = name.startsWith(q) ? 0.5 : 0
+  const includesName = name.includes(q) ? 0.3 : 0
+  const includesArtist = artist.includes(q) ? 0.25 : 0
+  const includesAlbum = album.includes(q) ? 0.15 : 0
+
+  const words = q.split(/\s+/)
+  const wordMatchRatio =
+    words.length > 1
+      ? words.filter((w) => name.includes(w) || artist.includes(w)).length / words.length
+      : 0
+
+  return Math.min(
+    exactName +
+      startsWithName +
+      includesName +
+      includesArtist +
+      includesAlbum +
+      wordMatchRatio * 0.4,
+    1.0,
+  )
+}
+
 const searchSongs = async (req, res) => {
   try {
     const { q: query, limit = 20, page = 1 } = req.query
@@ -30,58 +58,78 @@ const searchSongs = async (req, res) => {
     const offset = (parseInt(page, 10) - 1) * searchLimit
     const q = query.toLowerCase().trim()
 
-    const dbResults = await Song.findAll({
-      where: {
-        [Op.or]: [
-          sequelize.literal(`similarity("Song"."name", ${sequelize.escape(q)}) > 0.2`),
-          sequelize.literal(`similarity("Song"."artistNames", ${sequelize.escape(q)}) > 0.2`),
-          sequelize.literal(`similarity("Song"."albumName", ${sequelize.escape(q)}) > 0.2`),
-        ],
-      },
-      order: [
-        [
-          sequelize.literal(`
-            GREATEST(
-              similarity("Song"."name", ${sequelize.escape(q)}),
-              similarity("Song"."artistNames", ${sequelize.escape(q)}),
-              similarity("Song"."albumName", ${sequelize.escape(q)})
-            )
-          `),
-          "DESC",
+    const [dbResults, externalResults] = await Promise.all([
+      Song.findAll({
+        where: {
+          [Op.or]: [
+            sequelize.literal(`similarity("Song"."name", ${sequelize.escape(q)}) > 0.15`),
+            sequelize.literal(`similarity("Song"."artistNames", ${sequelize.escape(q)}) > 0.15`),
+            sequelize.literal(`similarity("Song"."albumName", ${sequelize.escape(q)}) > 0.15`),
+          ],
+        },
+        order: [
+          [
+            sequelize.literal(`
+              GREATEST(
+                similarity("Song"."name", ${sequelize.escape(q)}),
+                similarity("Song"."artistNames", ${sequelize.escape(q)}),
+                similarity("Song"."albumName", ${sequelize.escape(q)})
+              )
+            `),
+            "DESC",
+          ],
         ],
-      ],
-      limit: searchLimit,
-      offset,
-      attributes: ["songData", "songId"],
-    })
-
-    const dbSongs = dbResults.map((r) => r.songData)
-    const dbSongIds = new Set(dbResults.map((r) => r.songId))
+        limit: searchLimit,
+        offset,
+        attributes: {
+          include: [
+            [
+              sequelize.literal(`
+                GREATEST(
+                  similarity("Song"."name", ${sequelize.escape(q)}),
+                  similarity("Song"."artistNames", ${sequelize.escape(q)}),
+                  similarity("Song"."albumName", ${sequelize.escape(q)})
+                )
+              `),
+              "similarityScore",
+            ],
+          ],
+        },
+      }),
+      fetchExternalSearch(query, searchLimit),
+    ])
 
-    let externalSongs = []
-    const needMoreResults = dbSongs.length < MIN_DB_RESULTS
+    const scoredMap = new Map()
 
-    if (needMoreResults) {
-      const externalResults = await fetchExternalSearch(query, searchLimit)
-      externalSongs = externalResults.filter((song) => !dbSongIds.has(song.id))
+    for (const row of dbResults) {
+      const score = parseFloat(row.getDataValue("similarityScore")) || 0
+      scoredMap.set(row.songId, { song: row.songData, score })
+    }
 
-      if (externalSongs.length > 0) {
-        Song.bulkGetOrCreate(externalSongs).catch((err) => {
-          console.error("[SearchController] Background save failed:", err.message)
-        })
+    for (const song of externalResults) {
+      const score = computeRelevanceScore(song, q)
+      const existing = scoredMap.get(song.id)
+      if (!existing || score > existing.score) {
+        scoredMap.set(song.id, { song, score })
       }
     }
 
-    const combinedSongs = [...dbSongs, ...externalSongs].slice(0, searchLimit)
+    const ranked = [...scoredMap.values()].sort((a, b) => b.score - a.score).slice(0, searchLimit)
+
+    const newExternalSongs = externalResults.filter(
+      (s) => !dbResults.some((r) => r.songId === s.id),
+    )
+    if (newExternalSongs.length > 0) {
+      Song.bulkGetOrCreate(newExternalSongs).catch((err) => {
+        console.error("[SearchController] Background save failed:", err.message)
+      })
+    }
 
     res.status(200).json({
       status: "success",
       data: {
-        songs: combinedSongs,
-        count: combinedSongs.length,
-        source: needMoreResults ? "hybrid" : "database",
-        dbCount: dbSongs.length,
-        externalCount: externalSongs.length,
+        songs: ranked.map((r) => r.song),
+        count: ranked.length,
       },
     })
   } catch (error) {
