Merge pull request #766 from apoint123/feat/stream-decoding-for-ffmpeg

✨ feat: 为 ffmpeg 解码器添加流式解码功能

Author: imsyy

electron/main/index.ts

@@ -1,5 +1,5 @@
 import { electronApp } from "@electron-toolkit/utils";
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, session } from "electron";
 import { existsSync, mkdirSync } from "fs";
 import { join } from "path";
 import initAppServer from "../server";
@@ -70,6 +70,23 @@ class MainProcess {
     // 某些 API 只有在此事件发生后才能使用
     app.whenReady().then(async () => {
       processLog.info("🚀 Application Process Startup");
+
+      // 配置 COOP/COEP/CORP 头，FFmpeg 需要
+      session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+        const responseHeaders = { ...details.responseHeaders };
+
+        // 同样可以解决 CORS 限制，但为了避免安全问题，等真有需要的时候再开
+        // responseHeaders["Access-Control-Allow-Origin"] = ["*"];
+        // responseHeaders["Access-Control-Allow-Headers"] = ["*"];
+
+        // COOP/COEP/CORP 配置
+        responseHeaders["Cross-Origin-Opener-Policy"] = ["same-origin"];
+        responseHeaders["Cross-Origin-Embedder-Policy"] = ["require-corp"];
+        responseHeaders["Cross-Origin-Resource-Policy"] = ["cross-origin"];
+
+        callback({ responseHeaders });
+      });
+
       // 设置应用程序名称
       electronApp.setAppUserModelId("com.imsyy.splayer");
       // 启动主服务进程

public/wasm/decode-audio.wasm

@@ -86,7 +86,7 @@ const controlsOptions = computed<DropdownOption[]>(() => [
   {
     label: "播放速度",
     key: "rate",
-    disabled: settingStore.audioEngine === "ffmpeg" && settingStore.playbackEngine !== "mpv",
+    disabled: settingStore.playbackEngine === "mpv",
     icon: renderIcon("PlayRate"),
   },
 ]);

public/wasm/ffmpeg.wasm

@@ -122,6 +122,7 @@
         <n-select
           :value="audioEngineSelectValue"
           :options="audioEngineOptions"
+          :render-option="renderAudioEngineOption"
           class="set"
           @update:value="handleAudioEngineSelect"
         />
@@ -430,12 +431,13 @@
 import { usePlayerController } from "@/core/player/PlayerController";
 import { useSettingStore } from "@/stores";
 import { isLogin } from "@/utils/auth";
-import { isElectron } from "@/utils/env";
+import { checkIsolationSupport, isElectron } from "@/utils/env";
 import { renderOption } from "@/utils/helper";
 import { AI_AUDIO_LEVELS } from "@/utils/meta";
 import { openSongUnlockManager } from "@/utils/modal";
 import { uniqBy } from "lodash-es";
-import type { SelectOption } from "naive-ui";
+import { NTooltip, type SelectOption } from "naive-ui";
+import { h, type VNodeChild } from "vue";
 
 const player = usePlayerController();
 const settingStore = useSettingStore();
@@ -444,6 +446,11 @@ const outputDevices = ref<SelectOption[]>([]);
 
 // 统一处理音频引擎选择
 const handleAudioEngineSelect = async (value: "element" | "ffmpeg" | "mpv") => {
+  if (value === "ffmpeg" && !checkIsolationSupport()) {
+    window.$message.warning("当前环境不支持 FFmpeg 引擎，已回退至默认引擎");
+    return;
+  }
+
   const targetPlaybackEngine = value === "mpv" ? "mpv" : "web-audio";
   // 如果是切回 web-audio，且 value 为 element/ffmpeg，则更新 audioEngine
   const targetAudioEngine = value !== "mpv" ? value : settingStore.audioEngine;
@@ -511,10 +518,28 @@ const engineTip = computed(() => {
   return audioEngineData[settingStore.audioEngine]?.tip;
 });
 
+const renderAudioEngineOption = ({ node, option }: { node: VNodeChild; option: SelectOption }) => {
+  if (option.value === "ffmpeg" && option.disabled) {
+    return h(
+      NTooltip,
+      { placement: "left", keepAliveOnHover: false },
+      {
+        trigger: () => h("div", { style: "cursor: not-allowed;" }, [node]),
+        default: () => "当前环境不支持 FFmpeg",
+      },
+    );
+  }
+  return node;
+};
+
 // 组合下拉选项：包含 WebAudio / FFmpeg / MPV
 const audioEngineOptions = [
   { label: "Web Audio (默认)", value: "element" },
-  { label: "FFmpeg", value: "ffmpeg" },
+  {
+    label: "FFmpeg",
+    value: "ffmpeg",
+    disabled: !checkIsolationSupport(),
+  },
   { label: "MPV", value: "mpv" },
 ];
 

src/components/Player/PlayerRightMenu.vue

@@ -187,12 +187,12 @@ export class AudioElementPlayer extends BaseAudioPlayer {
     events.forEach((eventType) => {
       this.audioElement.addEventListener(eventType, (e) => {
         if (eventType === AUDIO_EVENTS.ERROR) {
-          this.emit(AUDIO_EVENTS.ERROR, {
+          this.dispatch(AUDIO_EVENTS.ERROR, {
             originalEvent: e,
             errorCode: this.getErrorCode(),
           });
         } else {
-          this.emit(eventType);
+          this.dispatch(eventType);
         }
       });
     });

src/components/Setting/PlaySetting.vue

@@ -1,3 +1,4 @@
+import { TypedEventTarget } from "@/utils/TypedEventTarget";
 import { AudioEffectManager } from "./AudioEffectManager";
 import type { EngineCapabilities, IPlaybackEngine } from "./IPlaybackEngine";
 
@@ -19,14 +20,20 @@ export const AUDIO_EVENTS = {
   ERROR: "error",
   CAN_PLAY: "canplay",
   LOAD_START: "loadstart",
+  SEEKED: "seeked",
+  WAITING: "waiting",
+  VOLUME_CHANGE: "volumechange",
+  PLAYING: "playing",
+  SEEKING: "seeking",
+  EMPTIED: "emptied",
 } as const;
 
 export type AudioEventType = (typeof AUDIO_EVENTS)[keyof typeof AUDIO_EVENTS];
 
 export type AudioEventMap = {
   [K in AudioEventType]: K extends typeof AUDIO_EVENTS.ERROR
     ? CustomEvent<AudioErrorDetail>
-    : Event;
+    : CustomEvent<undefined>;
 };
 
 export enum AudioErrorCode {
@@ -50,7 +57,10 @@ const SEEK_FADE_TIME = 0.05;
  * 管理 AudioContext、音量增益、EQ连接、以及通用的淡入淡出/Seek逻辑
  * 实现 IPlaybackEngine 接口
  */
-export abstract class BaseAudioPlayer extends EventTarget implements IPlaybackEngine {
+export abstract class BaseAudioPlayer
+  extends TypedEventTarget<AudioEventMap>
+  implements IPlaybackEngine
+{
   /** 核心上下文 */
   protected audioCtx: IExtendedAudioContext | null = null;
   /** 主输出增益节点 (控制音量) */
@@ -183,7 +193,7 @@ export abstract class BaseAudioPlayer extends EventTarget implements IPlaybackEn
     const duration = options.fadeOut ? (options.fadeDuration ?? 0.5) : 0;
 
     const performPause = async () => {
-      this.doPause();
+      await this.doPause();
 
       if (this.audioCtx && this.audioCtx.state === "running") {
         try {
@@ -211,26 +221,36 @@ export abstract class BaseAudioPlayer extends EventTarget implements IPlaybackEn
    * 跳转进度
    * @param time 目标时间 (秒)
    */
-  public async seek(time: number) {
+  public async seek(time: number, immediate = false) {
     this.cancelPendingPause();
     // 如果已经暂停，直接跳转
     if (this.paused) {
       this.doSeek(time);
       return;
     }
-    this.applyFadeTo(0, SEEK_FADE_TIME);
-    await new Promise((resolve) => setTimeout(resolve, SEEK_FADE_TIME * 1000));
-    this.doSeek(time);
-    this.applyFadeTo(this.volume, SEEK_FADE_TIME);
+
+    if (!immediate) {
+      this.applyFadeTo(0, SEEK_FADE_TIME);
+      await new Promise((resolve) => setTimeout(resolve, SEEK_FADE_TIME * 1000));
+    }
+
+    await this.doSeek(time);
+
+    if (!immediate) {
+      this.applyFadeTo(this.volume, SEEK_FADE_TIME);
+    } else {
+      this.applyFadeTo(this.volume, 0);
+    }
   }
 
   /**
    * 停止播放并重置
    */
   public stop() {
     this.cancelPendingPause();
-    this.pause({ fadeOut: false });
-    this.doSeek(0);
+    // 捕获可能产生的异步错误
+    Promise.resolve(this.pause({ fadeOut: false })).catch(() => {});
+    Promise.resolve(this.doSeek(0)).catch(() => {});
   }
 
   /**
@@ -340,10 +360,10 @@ export abstract class BaseAudioPlayer extends EventTarget implements IPlaybackEn
   protected abstract doPlay(): Promise<void>;
 
   /** 执行底层暂停 */
-  protected abstract doPause(): void;
+  protected abstract doPause(): void | Promise<void>;
 
   /** 执行底层 Seek */
-  protected abstract doSeek(time: number): void;
+  protected abstract doSeek(time: number): void | Promise<void>;
 
   /** 设置播放速率 */
   public abstract setRate(value: number): void;
@@ -359,47 +379,4 @@ export abstract class BaseAudioPlayer extends EventTarget implements IPlaybackEn
   public abstract get currentTime(): number;
   public abstract get paused(): boolean;
   public abstract getErrorCode(): number;
-
-  /**
-   * 触发事件
-   * @param type 事件类型
-   * @param detail 事件详情
-   */
-  protected emit(type: Exclude<AudioEventType, "error">): void;
-  protected emit(type: typeof AUDIO_EVENTS.ERROR, detail: AudioErrorDetail): void;
-  protected emit(type: AudioEventType, detail?: AudioErrorDetail): void {
-    if (type === AUDIO_EVENTS.ERROR && detail) {
-      this.dispatchEvent(new CustomEvent(type, { detail }));
-    } else {
-      this.dispatchEvent(new Event(type));
-    }
-  }
-
-  /**
-   * 添加事件监听
-   * @param type 事件类型
-   * @param listener 事件监听器
-   * @param options 事件选项
-   */
-  public override addEventListener<K extends keyof AudioEventMap>(
-    type: K,
-    listener: (this: BaseAudioPlayer, ev: AudioEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void {
-    super.addEventListener(type, listener as EventListenerOrEventListenerObject, options);
-  }
-
-  /**
-   * 移除事件监听
-   * @param type 事件类型
-   * @param listener 事件监听器
-   * @param options 事件选项
-   */
-  public override removeEventListener<K extends keyof AudioEventMap>(
-    type: K,
-    listener: (this: BaseAudioPlayer, ev: AudioEventMap[K]) => unknown,
-    options?: boolean | EventListenerOptions,
-  ): void {
-    super.removeEventListener(type, listener as EventListenerOrEventListenerObject, options);
-  }
 }