From 1cdface33c88fd7f4bf31e629ee33a574a918526 Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 03:16:37 +0800
Subject: [PATCH] feat: implement seeking (FFmpeg -ss restart), fix lyrics sync
 with seekOffset

- AudioPlayer.seek() restarts FFmpeg with -ss parameter for actual seeking
- New POST /api/player/:botId/seek endpoint
- BotStatus includes seekOffset and playStartTime from server
- Frontend elapsed = seekOffset + (now - playStartedAt)
- Progress bar click now seeks to clicked position
- All timing actions use _resetTiming() helper with seekOffset
- Lyrics sync uses store.elapsed which includes seekOffset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/audio/player.ts           | 52 ++++++++++++++++++++++----------
 src/bot/instance.ts           |  4 +++
 src/web/api/player.ts         | 16 ++++++++++
 web/src/components/Player.vue | 22 +++++++++-----
 web/src/stores/player.ts      | 57 +++++++++++++++++++----------------
 5 files changed, 101 insertions(+), 50 deletions(-)

diff --git a/src/audio/player.ts b/src/audio/player.ts
index a830772..48e7b42 100644
--- a/src/audio/player.ts
+++ b/src/audio/player.ts
@@ -22,6 +22,8 @@ export class AudioPlayer extends EventEmitter {
   private logger: Logger;
   private frameLoopRunning = false;
   private nextFrameTime = 0;
+  private currentUrl = "";
+  private seekOffset = 0; // seconds offset from seek
 
   constructor(logger: Logger) {
     super();
@@ -29,27 +31,32 @@ export class AudioPlayer extends EventEmitter {
     this.logger = logger;
   }
 
-  play(url: string): void {
+  play(url: string, seekSeconds = 0): void {
     this.stop();
+    this.currentUrl = url;
+    this.seekOffset = seekSeconds;
 
-    this.logger.info({ url: url.slice(0, 80) }, "Starting playback");
+    this.logger.info({ url: url.slice(0, 80), seek: seekSeconds }, "Starting playback");
 
-    this.ffmpeg = spawn(
-      "ffmpeg",
-      [
-        "-reconnect", "1",
-        "-reconnect_streamed", "1",
-        "-reconnect_delay_max", "5",
-        "-i", url,
-        "-f", "s16le",
-        "-ar", "48000",
-        "-ac", "2",
-        "-acodec", "pcm_s16le",
-        "-",
-      ],
-      { stdio: ["ignore", "pipe", "pipe"] }
+    const args = [
+      "-reconnect", "1",
+      "-reconnect_streamed", "1",
+      "-reconnect_delay_max", "5",
+    ];
+    if (seekSeconds > 0) {
+      args.push("-ss", String(seekSeconds));
+    }
+    args.push(
+      "-i", url,
+      "-f", "s16le",
+      "-ar", "48000",
+      "-ac", "2",
+      "-acodec", "pcm_s16le",
+      "-",
     );
 
+    this.ffmpeg = spawn("ffmpeg", args, { stdio: ["ignore", "pipe", "pipe"] });
+
     this.ffmpeg.stderr!.on("data", () => {
       // Suppress FFmpeg stderr output
     });
@@ -159,6 +166,17 @@ export class AudioPlayer extends EventEmitter {
     }
   }
 
+  /** Seek to a position in seconds. Restarts FFmpeg with -ss offset. */
+  seek(seconds: number): void {
+    if (!this.currentUrl) return;
+    this.logger.info({ seek: seconds }, "Seeking");
+    this.play(this.currentUrl, seconds);
+  }
+
+  getSeekOffset(): number {
+    return this.seekOffset;
+  }
+
   stop(): void {
     this.frameLoopRunning = false;
     if (this.ffmpeg) {
@@ -167,6 +185,8 @@ export class AudioPlayer extends EventEmitter {
     }
     this.pcmBuffer = Buffer.alloc(0);
     this.state = "idle";
+    this.currentUrl = "";
+    this.seekOffset = 0;
   }
 
   setVolume(vol: number): void {
diff --git a/src/bot/instance.ts b/src/bot/instance.ts
index ca5d760..95f69bd 100644
--- a/src/bot/instance.ts
+++ b/src/bot/instance.ts
@@ -37,6 +37,8 @@ export interface BotStatus {
   queueSize: number;
   volume: number;
   playMode: PlayMode;
+  seekOffset: number; // seconds offset from last seek/play start
+  playStartTime: number; // server timestamp when playback started
 }
 
 export class BotInstance extends EventEmitter {
@@ -505,6 +507,8 @@ export class BotInstance extends EventEmitter {
       queueSize: this.queue.size(),
       volume: this.player.getVolume(),
       playMode: this.queue.getMode(),
+      seekOffset: this.player.getSeekOffset(),
+      playStartTime: Date.now(),
     };
   }
 
diff --git a/src/web/api/player.ts b/src/web/api/player.ts
index 388d100..2c6731c 100644
--- a/src/web/api/player.ts
+++ b/src/web/api/player.ts
@@ -104,6 +104,22 @@ export function createPlayerRouter(
     }
   });
 
+  // Seek to position
+  router.post("/:botId/seek", async (req, res) => {
+    try {
+      const bot = (req as any).bot;
+      const { position } = req.body; // seconds
+      if (typeof position !== "number" || position < 0) {
+        res.status(400).json({ error: "position (seconds) is required" });
+        return;
+      }
+      bot.getPlayer().seek(position);
+      res.json({ message: `Seeked to ${Math.floor(position)}s`, seekOffset: position });
+    } catch (err) {
+      res.status(500).json({ error: (err as Error).message });
+    }
+  });
+
   router.get("/:botId/queue", (req, res) => {
     const bot = (req as any).bot;
     res.json({ queue: bot.getQueue(), status: bot.getStatus() });
diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index 7b19ee8..ee2dc3d 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -74,6 +74,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { Icon } from '@iconify/vue';
+import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from './CoverArt.vue';
 import Queue from './Queue.vue';
@@ -101,10 +102,10 @@ function formatTime(seconds: number): string {
 }
 
 function updateProgress() {
-  // Directly compute elapsed from raw values (bypass Vue reactivity)
   const bot = store.activeBot;
+  const seekOff = store.seekOffset;
   if (bot?.playing && !bot.paused && store.playStartedAt > 0) {
-    currentElapsed.value = (Date.now() - store.playStartedAt) / 1000;
+    currentElapsed.value = seekOff + (Date.now() - store.playStartedAt) / 1000;
   } else if (bot?.paused) {
     currentElapsed.value = store.pausedElapsed;
   }
@@ -117,17 +118,22 @@ function updateProgress() {
   rafId = requestAnimationFrame(updateProgress);
 }
 
-function onProgressClick(e: MouseEvent) {
+async function onProgressClick(e: MouseEvent) {
   const bar = progressBarRef.value;
-  if (!bar) return;
+  if (!bar || !store.activeBotId) return;
   const rect = bar.getBoundingClientRect();
   const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
   const duration = currentSong.value?.duration ?? 0;
   const seekTime = ratio * duration;
-  // Can't seek server-side FFmpeg stream — show tooltip with target time
-  progressTooltipTime.value = `跳转不可用 (${formatTime(seekTime)})`;
-  progressTooltipVisible.value = true;
-  setTimeout(() => { progressTooltipVisible.value = false; }, 1500);
+
+  try {
+    await axios.post(`/api/player/${store.activeBotId}/seek`, { position: seekTime });
+    store.seekOffset = seekTime;
+    store.playStartedAt = Date.now();
+    store.pausedElapsed = 0;
+  } catch {
+    // ignore
+  }
 }
 
 function onProgressHover(e: MouseEvent) {
diff --git a/web/src/stores/player.ts b/web/src/stores/player.ts
index fd99a4a..c684d6c 100644
--- a/web/src/stores/player.ts
+++ b/web/src/stores/player.ts
@@ -21,6 +21,8 @@ export interface BotStatus {
   queueSize: number;
   volume: number;
   playMode: string;
+  seekOffset?: number;
+  playStartTime?: number;
 }
 
 export interface PlaylistItem {
@@ -39,8 +41,9 @@ export const usePlayerStore = defineStore('player', {
     activeBotId: null as string | null,
     queue: [] as Song[],
     theme: 'dark' as 'dark' | 'light',
-    playStartedAt: 0, // timestamp when current song started
-    pausedElapsed: 0, // elapsed time when paused
+    playStartedAt: 0, // client timestamp when playback started
+    seekOffset: 0, // server seek offset in seconds
+    pausedElapsed: 0, // elapsed seconds when paused
     // Home page cached data
     recommendPlaylists: [] as PlaylistItem[],
     dailySongs: [] as Song[],
@@ -61,12 +64,11 @@ export const usePlayerStore = defineStore('player', {
     isPaused(): boolean {
       return this.activeBot?.paused ?? false;
     },
-    /** Elapsed playback time in seconds */
     elapsed(): number {
       if (!this.activeBot?.currentSong) return 0;
       if (this.isPaused) return this.pausedElapsed;
       if (!this.isPlaying || this.playStartedAt === 0) return 0;
-      return (Date.now() - this.playStartedAt) / 1000;
+      return this.seekOffset + (Date.now() - this.playStartedAt) / 1000;
     },
   },
 
@@ -76,14 +78,12 @@ export const usePlayerStore = defineStore('player', {
     },
 
     updateBotStatus(botId: string, status: BotStatus) {
-      // Capture previous state BEFORE updating
       const prev = this.bots.find((b) => b.id === botId);
       const prevSongId = prev?.currentSong?.id;
       const prevPaused = prev?.paused ?? false;
       const prevPlaying = prev?.playing ?? false;
       const newSongId = status.currentSong?.id;
 
-      // Update the bot status
       const index = this.bots.findIndex((b) => b.id === botId);
       if (index >= 0) {
         this.bots[index] = status;
@@ -91,17 +91,20 @@ export const usePlayerStore = defineStore('player', {
         this.bots.push(status);
       }
 
-      // Only adjust timing for the active bot
       if (botId !== (this.activeBotId ?? this.bots[0]?.id)) return;
 
-      // Song changed — reset timer
-      if (newSongId && newSongId !== prevSongId) {
+      // Use server-provided seekOffset
+      const serverSeek = status.seekOffset ?? 0;
+
+      // Song changed or seek offset changed — reset timer
+      if ((newSongId && newSongId !== prevSongId) || serverSeek !== this.seekOffset) {
+        this.seekOffset = serverSeek;
         this.playStartedAt = Date.now();
         this.pausedElapsed = 0;
         return;
       }
 
-      // Resumed from pause
+      // Resumed
       if (status.playing && !status.paused && prevPaused) {
         this.playStartedAt = Date.now() - this.pausedElapsed * 1000;
         return;
@@ -110,8 +113,8 @@ export const usePlayerStore = defineStore('player', {
       // Paused
       if (status.paused && prevPlaying && !prevPaused) {
         this.pausedElapsed = this.playStartedAt > 0
-          ? (Date.now() - this.playStartedAt) / 1000
-          : 0;
+          ? this.seekOffset + (Date.now() - this.playStartedAt) / 1000
+          : this.seekOffset;
       }
     },
 
@@ -156,18 +159,22 @@ export const usePlayerStore = defineStore('player', {
       }
     },
 
+    _resetTiming(seekSec = 0) {
+      this.seekOffset = seekSec;
+      this.playStartedAt = Date.now();
+      this.pausedElapsed = 0;
+    },
+
     async play(query: string, platform = 'netease') {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/play`, { query, platform });
-      this.playStartedAt = Date.now();
-      this.pausedElapsed = 0;
+      this._resetTiming();
     },
 
     async playById(songId: string, platform = 'netease') {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/play-by-id`, { songId, platform });
-      this.playStartedAt = Date.now();
-      this.pausedElapsed = 0;
+      this._resetTiming();
     },
 
     async addToQueue(query: string, platform = 'netease') {
@@ -183,41 +190,39 @@ export const usePlayerStore = defineStore('player', {
     async playPlaylist(playlistId: string, platform = 'netease') {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/play-playlist`, { playlistId, platform });
-      this.playStartedAt = Date.now();
-      this.pausedElapsed = 0;
+      this._resetTiming();
     },
 
     async pause() {
       if (!this.activeBotId) return;
-      this.pausedElapsed = this.playStartedAt > 0
-        ? (Date.now() - this.playStartedAt) / 1000
-        : 0;
+      // Save current elapsed including seekOffset
+      this.pausedElapsed = this.elapsed;
       await axios.post(`/api/player/${this.activeBotId}/pause`);
     },
 
     async resume() {
       if (!this.activeBotId) return;
-      this.playStartedAt = Date.now() - this.pausedElapsed * 1000;
+      // Restore: playStartedAt = now - (pausedElapsed - seekOffset)
+      this.playStartedAt = Date.now() - (this.pausedElapsed - this.seekOffset) * 1000;
       await axios.post(`/api/player/${this.activeBotId}/resume`);
     },
 
     async next() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/next`);
-      this.playStartedAt = Date.now();
-      this.pausedElapsed = 0;
+      this._resetTiming();
     },
 
     async prev() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/prev`);
-      this.playStartedAt = Date.now();
-      this.pausedElapsed = 0;
+      this._resetTiming();
     },
 
     async stop() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/stop`);
+      this.seekOffset = 0;
       this.playStartedAt = 0;
       this.pausedElapsed = 0;
     },