1
import type { MusicPlayerConfig } from "../types/config";
2

3
// 音乐播放器配置
4
export const musicPlayerConfig: MusicPlayerConfig = {
5
  // 基础功能开关
6
  enable: true, // 启用音乐播放器功能
7

8
  // 使用方式：'meting' 或 'local'
9
  mode: "meting", // "meting" 使用 Meting API，"local" 使用本地音乐列表
10

11
  // Meting API 配置
12
  meting: {
13
    // Meting API 地址
14
    // 默认使用官方 API，也可以使用自定义 API
15
    api: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",
16

17
    // 音乐平台：netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
18
    server: "netease",
19

20
    // 类型：song=单曲, playlist=歌单, album=专辑, search=搜索, artist=艺术家
21
    type: "playlist",
22

23
    // 歌单/专辑/单曲 ID 或搜索关键词
24
    id: "10046455237", // 网易云音乐歌单ID示例
25

26
    // 认证 token（可选）
27
    auth: "",
28

29
    // 备用 API 配置（当主 API 失败时使用）
30
    fallbackApis: [
31
      "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
32
      "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
33
    ],
34

35
    // MetingJS 脚本路径
36
    // 默认使用 CDN：https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js
37
    // 备用CDN：https://unpkg.com/meting@2/dist/Meting.min.js
38
    // 也可配置为本地路径
39
    jsPath: "https://unpkg.com/meting@2/dist/Meting.min.js",
40
  },
41

42
  // 本地音乐配置（当 mode 为 'local' 时使用）
43
  local: {
44
    playlist: [
45
      {
46
        name: "使一颗心免于哀伤",
47
        artist: "知更鸟 / HOYO-MiX / Chevy",
48
        url: "/assets/music/使一颗心免于哀伤-哼唱.wav",
49
        cover: "/assets/music/cover/109951169585655912.jpg",
50
        lrc: "", // 歌词内容，支持 LRC 格式
51
      },
52
    ],
53
  },
54

55
  // APlayer 配置选项
56
  player: {
57
    // 是否自动播放  浏览器可能会阻止，需用户交互一次网页后才自动播放
58
    autoplay: false,
59

60
    // 主题色
61
    theme: "var(--btn-regular-bg)",
62

63
    // 循环模式：'all'=列表循环, 'one'=单曲循环, 'none'=不循环
64
    loop: "all",
65

66
    // 播放顺序：'list'=列表顺序, 'random'=随机播放
67
    order: "list",
68

69
    // 预加载：'none'=不预加载, 'metadata'=预加载元数据, 'auto'=自动
70
    preload: "auto",
71

72
    // 默认音量 (0-1)
73
    volume: 0.7,
74

75
    // 是否互斥播放（同时只能播放一个播放器）
76
    mutex: true,
77

78
    // 歌词类型：0=不显示, 1=显示（需要提供 lrc 字段）, 2=显示（从 HTML 内容读取）, 3=异步加载（从 API 获取）
79
    lrcType: 3,
80

81
    // 歌词是否默认隐藏（当 lrcType 不为 0 时，可以通过此选项控制初始显示状态）
82
    // true=默认隐藏（用户可以通过歌词按钮手动显示）, false=默认显示
83
    lrcHidden: true,
84

85
    // 播放列表是否默认折叠
86
    listFolded: false,
87

88
    // 播放列表最大高度
89
    listMaxHeight: "340px",
90

91
    // localStorage 存储键名
92
    storageName: "aplayer-setting",
93
  },
94

95
  // 响应式配置
96
  responsive: {
97
    // 移动端配置
98
    mobile: {
99
      // 在移动端是否隐藏
100
      hide: false,
101

102
      // 移动端断点（小于此宽度时应用移动端配置）
103
      breakpoint: 768,
104
    },
105
  },
106
};

1
// 。。。。省略
2

3
// 音乐播放器配置
4
export type MusicPlayerConfig = {
5
  // 基础功能开关
6
  enable: boolean; // 启用音乐播放器功能
7

8
  // 使用方式：'meting' 或 'local'
9
  mode?: "meting" | "local"; // "meting" 使用 Meting API，"local" 使用本地音乐列表
10

11
  // Meting API 配置
12
  meting?: {
13
    // Meting API 地址
14
    api?: string;
15

16
    // 音乐平台：netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
17
    server?: "netease" | "tencent" | "kugou" | "xiami" | "baidu";
18

19
    // 类型：song=单曲, playlist=歌单, album=专辑, search=搜索, artist=艺术家
20
    type?: "song" | "playlist" | "album" | "search" | "artist";
21

22
    // 歌单/专辑/单曲 ID 或搜索关键词
23
    id?: string;
24

25
    // 认证 token（可选）
26
    auth?: string;
27

28
    // 备用 API 配置（当主 API 失败时使用）
29
    fallbackApis?: string[];
30

31
    // MetingJS 脚本路径（默认使用 CDN，也可配置为本地路径）
32
    jsPath?: string;
33
  };
34

35
  // 本地音乐配置（当 mode 为 'local' 时使用）
36
  local?: {
37
    playlist?: Array<{
38
      name: string; // 歌曲名称
39
      artist: string; // 艺术家
40
      url: string; // 音乐文件路径（相对于 public 目录）
41
      cover?: string; // 封面图片路径（相对于 public 目录）
42
      lrc?: string; // 歌词内容，支持 LRC 格式
43
    }>;
44
  };
45

46
  // APlayer 配置选项
47
  player?: {
48
    // 是否固定模式（固定在页面底部）
49
    fixed?: boolean;
50

51
    // 是否迷你模式
52
    mini?: boolean;
53

54
    // 是否自动播放
55
    autoplay?: boolean;
56

57
    // 主题色
58
    theme?: string;
59

60
    // 循环模式：'all'=列表循环, 'one'=单曲循环, 'none'=不循环
61
    loop?: "all" | "one" | "none";
62

63
    // 播放顺序：'list'=列表顺序, 'random'=随机播放
64
    order?: "list" | "random";
65

66
    // 预加载：'none'=不预加载, 'metadata'=预加载元数据, 'auto'=自动
67
    preload?: "none" | "metadata" | "auto";
68

69
    // 默认音量 (0-1)
70
    volume?: number;
71

72
    // 是否互斥播放（同时只能播放一个播放器）
73
    mutex?: boolean;
74

75
    // 歌词类型：0=不显示, 1=显示（需要提供 lrc 字段）, 2=显示（从 HTML 内容读取）, 3=异步加载（从 API 获取）
76
    lrcType?: 0 | 1 | 2 | 3;
77

78
    // 歌词是否默认隐藏（当 lrcType 不为 0 时，可以通过此选项控制初始显示状态）
79
    lrcHidden?: boolean;
80

81
    // 播放列表是否默认折叠
82
    listFolded?: boolean;
83

84
    // 播放列表最大高度
85
    listMaxHeight?: string;
86

87
    // localStorage 存储键名
88
    storageName?: string;
89
  };
90

91
  // 响应式配置
92
  responsive?: {
93
    // 移动端配置
94
    mobile?: {
95
      // 在移动端是否隐藏
96
      hide?: boolean;
97

98
      // 移动端断点（小于此宽度时应用移动端配置）
99
      breakpoint?: number;
100
    };
101
  };
102
};

1
---
2
import { musicPlayerConfig } from "@/config/musicConfig";
3
import { url } from "@/utils/url-utils";
4

5
const config = musicPlayerConfig;
6

7
// 预先生成本地资源路径，确保在非根目录部署时也能正确加载
8
const aplayerCssPath = url("/assets/css/APlayer.min.css");
9
const aplayerCustomCssPath = url("/assets/css/APlayer.custom.css");
10
const aplayerJsPath = url("/assets/js/APlayer.min.js");
11

12
// MetingJS 路径处理
13
// 如果配置的是相对路径（以 / 开头），使用 url() 处理以确保非根目录部署时正确
14
// 如果是完整的 URL（http/https），直接使用
15
const metingJsPath = config.meting?.jsPath
16
  ? config.meting.jsPath.startsWith("http://") ||
17
    config.meting.jsPath.startsWith("https://")
18
    ? config.meting.jsPath
19
    : url(config.meting.jsPath)
20
  : "https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"; // 默认 CDN 路径
21

22
// 预处理本地音乐列表的路径（如果使用本地模式）
23
const processedLocalPlaylist =
24
  config.mode === "local" && config.local?.playlist
25
    ? config.local.playlist.map((song) => ({
26
        ...song,
27
        url: url(song.url),
28
        cover: song.cover ? url(song.cover) : undefined,
29
      }))
30
    : null;
31
---
32

33
{config.enable && (
34
  <>
35
    <!-- APlayer CSS -->
36
    <link
37
      rel="stylesheet"
38
      href={aplayerCssPath}
39
    />
40
    <link
41
      rel="stylesheet"
42
      href={aplayerCustomCssPath}
43
    />
44

45
    <!-- 音乐播放器容器 -->
46
    <div
47
      id="aplayer-container"
48
      class:mobile-hide={config.responsive?.mobile?.hide}
49
    >
50
      {config.mode === "meting" && config.meting ? (
51
        <!-- 使用 MetingJS -->
52
        <meting-js
53
          server={config.meting.server || "netease"}
54
          type={config.meting.type || "playlist"}
55
          id={config.meting.id || ""}
56
          api={config.meting.api}
57
          auth={config.meting.auth}
58
          fixed={(config.player?.fixed ?? true) ? "true" : "false"}
59
          mini={(config.player?.mini ?? true) ? "true" : "false"}
60
          autoplay={config.player?.autoplay ? "true" : "false"}
61
          theme={config.player?.theme || "#b7daff"}
62
          loop={config.player?.loop || "all"}
63
          order={config.player?.order || "list"}
64
          preload={config.player?.preload || "auto"}
65
          volume={String(config.player?.volume ?? 0.7)}
66
          mutex={config.player?.mutex !== false ? "true" : "false"}
67
          lrc-type={String(config.player?.lrcType ?? 3)}
68
          list-folded={config.player?.listFolded ? "true" : "false"}
69
          list-max-height={config.player?.listMaxHeight || "340px"}
70
          storage-name={config.player?.storageName || "aplayer-setting"}
71
        />
72
      ) : config.mode === "local" && processedLocalPlaylist && processedLocalPlaylist.length > 0 ? (
73
        <!-- 使用本地音乐列表 -->
74
        <!-- 单个音乐使用 MetingJS，多个音乐使用 APlayer 直接初始化 -->
75
        {processedLocalPlaylist.length === 1 ? (
76
          <meting-js
77
            name={processedLocalPlaylist?.[0]?.name || ""}
78
            artist={processedLocalPlaylist?.[0]?.artist || ""}
79
            url={processedLocalPlaylist?.[0]?.url || ""}
80
            cover={processedLocalPlaylist?.[0]?.cover}
81
            fixed={(config.player?.fixed ?? true) ? "true" : "false"}
82
            mini={(config.player?.mini ?? true) ? "true" : "false"}
83
            autoplay={config.player?.autoplay ? "true" : "false"}
84
            theme={config.player?.theme || "#b7daff"}
85
            loop={config.player?.loop || "all"}
86
            order={config.player?.order || "list"}
87
            preload={config.player?.preload || "auto"}
88
            volume={String(config.player?.volume ?? 0.7)}
89
            mutex={config.player?.mutex !== false ? "true" : "false"}
90
            lrc-type={processedLocalPlaylist[0]?.lrc ? "2" : "0"}
91
            list-folded={config.player?.listFolded ? "true" : "false"}
92
            list-max-height={config.player?.listMaxHeight || "340px"}
93
            storage-name={config.player?.storageName || "aplayer-setting"}
94
          >
95
            {processedLocalPlaylist?.[0]?.lrc && (
96
              <pre hidden>
97
                {processedLocalPlaylist[0].lrc}
98
              </pre>
99
            )}
100
          </meting-js>
101
        ) : (
102
          <!-- 多个本地音乐，使用 APlayer 直接初始化 -->
103
          <div id="local-aplayer"></div>
104
        )}
105
      ) : null}
106
    </div>
107
  </>
108
)}
109

110
<script define:vars={{ config, aplayerJsPath, metingJsPath, processedLocalPlaylist }} is:inline>
111
  // 动态加载 APlayer 和 MetingJS
112
  (function() {
113
    if (!config.enable) return;
114

115
    // 确保在浏览器环境中运行
116
    if (typeof window === 'undefined') return;
117

118
    // 加载 APlayer JS
119
    function loadAPlayer() {
120
      return new Promise((resolve) => {
121
        if (window.APlayer) {
122
          resolve(window.APlayer);
123
          return;
124
        }
125

126
        const aplayerScript = document.createElement("script");
127
        aplayerScript.src = aplayerJsPath;
128
        aplayerScript.async = true;
129
        aplayerScript.onload = () => resolve(window.APlayer);
130
        aplayerScript.onerror = () => {
131
          console.error("Failed to load APlayer");
132
          resolve(null);
133
        };
134
        document.head.appendChild(aplayerScript);
135
      });
136
    }
137

138
    // 全局用户交互状态
139
    if (!window.hasMusicInteracted) {
140
      window.hasMusicInteracted = false;
141
    }
142

143
    function tryAutoplay(aplayer) {
144
      if (!config.player?.autoplay) return;
145

146
      // 如果用户已经交互过，立即尝试播放
147
      if (window.hasMusicInteracted) {
148
        if (aplayer && aplayer.paused) {
149
          const playPromise = aplayer.play();
150
          if (playPromise && typeof playPromise.catch === 'function') {
151
            playPromise.catch((error) => {
152
              // 浏览器阻止自动播放是正常的，不需要报错
153
              if (error.name !== 'NotAllowedError') {
154
                console.log('自动播放失败:', error.name);
155
              }
156
            });
157
          }
158
        }
159
      } else {
160
        // 等待用户第一次交互后自动播放
161
        const enableAutoplay = () => {
162
          if (window.hasMusicInteracted) return;
163
          window.hasMusicInteracted = true;
164

165
          if (aplayer && aplayer.paused) {
166
            const playPromise = aplayer.play();
167
            if (playPromise && typeof playPromise.catch === 'function') {
168
              playPromise.catch((error) => {
169
                if (error.name !== 'NotAllowedError') {
170
                  console.log('自动播放失败:', error.name);
171
                }
172
              });
173
            }
174
          }
175
        };
176

177
        // 监听各种用户交互事件（只监听一次）
178
        ['click', 'keydown', 'touchstart', 'scroll'].forEach(eventType => {
179
          document.addEventListener(eventType, enableAutoplay, {
180
            once: true,
181
            passive: true
182
          });
183
        });
184
      }
185
    }
186

187
    // 检查 MetingJS 元素是否成功加载了音乐
188
    function checkMetingSuccess(metingElement, timeout = 5000) {
189
      return new Promise((resolve) => {
190
        const startTime = Date.now();
191

192
        const checkSuccess = setInterval(() => {
193
          const aplayer = metingElement?.aplayer;
194
          // 检查是否有 APlayer 实例且有音频列表
195
          if (aplayer && aplayer.list && aplayer.list.audios && aplayer.list.audios.length > 0) {
196
            clearInterval(checkSuccess);
197
            resolve(true);
198
            return;
199
          }
200

201
          // 超时检查
202
          if (Date.now() - startTime >= timeout) {
203
            clearInterval(checkSuccess);
204
            resolve(false);
205
          }
206
        }, 100);
207
      });
208
    }
209

210
    // 重新创建 MetingJS 元素以使用新的 API
211
    function recreateMetingElement(container, apiUrl, config) {
212
      // 移除旧的元素
213
      const oldElement = container.querySelector('meting-js');
214
      if (oldElement) {
215
        // 如果已有 APlayer 实例，先销毁它
216
        if (oldElement.aplayer) {
217
          try {
218
            oldElement.aplayer.destroy();
219
          } catch (e) {
220
            console.warn('销毁旧 APlayer 实例时出错:', e);
221
          }
222
        }
223
        oldElement.remove();
224
      }
225

226
      // 创建新元素
227
      const newElement = document.createElement('meting-js');
228
      newElement.setAttribute('server', config.meting?.server || 'netease');
229
      newElement.setAttribute('type', config.meting?.type || 'playlist');
230
      newElement.setAttribute('id', config.meting?.id || '');
231
      newElement.setAttribute('api', apiUrl);
232
      if (config.meting?.auth) {
233
        newElement.setAttribute('auth', config.meting.auth);
234
      }
235
      newElement.setAttribute('fixed', (config.player?.fixed ?? true) ? 'true' : 'false');
236
      newElement.setAttribute('mini', (config.player?.mini ?? true) ? 'true' : 'false');
237
      newElement.setAttribute('autoplay', config.player?.autoplay ? 'true' : 'false');
238
      newElement.setAttribute('theme', config.player?.theme || '#b7daff');
239
      newElement.setAttribute('loop', config.player?.loop || 'all');
240
      newElement.setAttribute('order', config.player?.order || 'list');
241
      newElement.setAttribute('preload', config.player?.preload || 'auto');
242
      newElement.setAttribute('volume', String(config.player?.volume ?? 0.7));
243
      newElement.setAttribute('mutex', config.player?.mutex !== false ? 'true' : 'false');
244
      newElement.setAttribute('lrc-type', String(config.player?.lrcType ?? 3));
245
      newElement.setAttribute('list-folded', config.player?.listFolded ? 'true' : 'false');
246
      newElement.setAttribute('list-max-height', config.player?.listMaxHeight || '340px');
247
      newElement.setAttribute('storage-name', config.player?.storageName || 'aplayer-setting');
248

249
      container.appendChild(newElement);
250
      return newElement;
251
    }
252

253
    // 处理移动端显示/隐藏
254
    function handleMobileVisibility(aplayer) {
255
      if (!aplayer || !aplayer.container) return;
256

257
      const shouldHide = config.responsive?.mobile?.hide === true;
258
      const breakpoint = config.responsive?.mobile?.breakpoint || 768;
259
      const isMobile = window.innerWidth <= breakpoint;
260

261
      if (shouldHide && isMobile) {
262
        aplayer.container.style.display = 'none';
263
        aplayer.container.classList.add('mobile-hide');
264

265
        // 同时处理容器（如果存在）
266
        const container = document.getElementById('aplayer-container');
267
        if (container) {
268
          container.style.display = 'none';
269
          container.classList.add('mobile-hide');
270
        }
271
      } else {
272
        aplayer.container.style.display = '';
273
        aplayer.container.classList.remove('mobile-hide');
274

275
        // 同时处理容器（如果存在）
276
        const container = document.getElementById('aplayer-container');
277
        if (container) {
278
          container.style.display = '';
279
          container.classList.remove('mobile-hide');
280
        }
281
      }
282
    }
283

284
    // 初始化时处理容器的移动端显示/隐藏
285
    function initContainerMobileVisibility() {
286
      const container = document.getElementById('aplayer-container');
287
      if (!container) return;
288

289
      const shouldHide = config.responsive?.mobile?.hide === true;
290
      const breakpoint = config.responsive?.mobile?.breakpoint || 768;
291
      const isMobile = window.innerWidth <= breakpoint;
292

293
      if (shouldHide && isMobile) {
294
        container.style.display = 'none';
295
        container.classList.add('mobile-hide');
296
      } else {
297
        container.style.display = '';
298
        container.classList.remove('mobile-hide');
299
      }
300

301
      // 监听窗口大小变化
302
      const resizeHandler = () => {
303
        const nowIsMobile = window.innerWidth <= breakpoint;
304
        if (shouldHide && nowIsMobile) {
305
          container.style.display = 'none';
306
          container.classList.add('mobile-hide');
307
        } else {
308
          container.style.display = '';
309
          container.classList.remove('mobile-hide');
310
        }
311
      };
312
      window.addEventListener('resize', resizeHandler);
313
    }
314

315
    // 初始化 MetingJS 元素并设置播放器
316
    function setupMetingElement(metingElement) {
317
      return new Promise((resolve) => {
318
        // 监听 aplayer 初始化
319
        const checkAPlayer = setInterval(() => {
320
          const aplayer = metingElement.aplayer;
321
          if (aplayer && aplayer.container) {
322
            clearInterval(checkAPlayer);
323

324
            // 监听播放状态，更新封面动画
325
            const updatePlayingState = () => {
326
              if (aplayer.container) {
327
                const isPlaying = !aplayer.paused;
328
                aplayer.container.setAttribute('data-playing', String(isPlaying));
329
                if (isPlaying) {
330
                  aplayer.container.classList.add('aplayer-playing');
331
                } else {
332
                  aplayer.container.classList.remove('aplayer-playing');
333
                }
334
              }
335
            };
336

337
            // 监听播放/暂停事件
338
            if (aplayer.audio) {
339
              aplayer.audio.addEventListener('play', updatePlayingState);
340
              aplayer.audio.addEventListener('pause', updatePlayingState);
341
              aplayer.audio.addEventListener('ended', updatePlayingState);
342
            }
343

344
            aplayer.container.setAttribute('data-positioned', 'right');
345
            // 立即应用右侧样式
346
            requestAnimationFrame(() => {
347
              if (aplayer.container) {
348
                aplayer.container.style.right = '0';
349
                aplayer.container.style.left = 'unset';
350

351
                // 初始化播放状态
352
                updatePlayingState();
353

354
                // 处理移动端显示/隐藏
355
                handleMobileVisibility(aplayer);
356

357
                // 监听窗口大小变化，动态调整显示/隐藏
358
                const resizeHandler = () => handleMobileVisibility(aplayer);
359
                window.addEventListener('resize', resizeHandler);
360

361
                // 短暂延迟后标记为已初始化，恢复展开动画
362
                setTimeout(() => {
363
                  aplayer.container.setAttribute('data-initialized', 'true');
364

365
                  // 如果配置了默认隐藏歌词，则隐藏歌词
366
                  if (config.player?.lrcHidden && aplayer.lrc) {
367
                    aplayer.lrc.hide();
368
                    // 同时设置歌词按钮为未激活状态
369
                    const lrcButton = aplayer.container.querySelector('.aplayer-icon-lrc');
370
                    if (lrcButton) {
371
                      lrcButton.classList.add('aplayer-icon-lrc-inactivity');
372
                    }
373
                  }
374

375
                  // 如果自动播放被阻止，等待用户交互后恢复
376
                  if (config.player?.autoplay && aplayer.paused) {
377
                    tryAutoplay(aplayer);
378
                  }
379
                }, 200);
380
              }
381
            });
382

383
            resolve(true);
384
          }
385
        }, 50);
386

387
        // 10秒后停止检查
388
        setTimeout(() => {
389
          clearInterval(checkAPlayer);
390
          resolve(false);
391
        }, 10000);
392
      });
393
    }
394

395
    // 使用备用 API 重试加载
396
    async function retryWithFallbackAPI(container, fallbackApis, currentIndex = 0) {
397
      if (currentIndex >= fallbackApis.length) {
398
        console.error('所有 API 都失败了，无法加载音乐播放器');
399
        return null;
400
      }
401

402
      const fallbackApi = fallbackApis[currentIndex];
403
      console.log(`尝试使用备用 API ${currentIndex + 1}/${fallbackApis.length}: ${fallbackApi}`);
404

405
      // 替换 API URL 中的占位符
406
      const server = config.meting?.server || 'netease';
407
      const type = config.meting?.type || 'playlist';
408
      const id = config.meting?.id || '';
409

410
      let apiUrl = fallbackApi
411
        .replace(':server', server)
412
        .replace(':type', type)
413
        .replace(':id', id);
414

415
      // 设置全局 API
416
      window.meting_api = apiUrl;
417

418
      // 重新创建元素
419
      const newElement = recreateMetingElement(container, apiUrl, config);
420

421
      // 等待元素初始化
422
      await new Promise(resolve => setTimeout(resolve, 500));
423

424
      // 检查是否成功
425
      const success = await checkMetingSuccess(newElement, 5000);
426

427
      if (success) {
428
        console.log(`备用 API ${currentIndex + 1} 成功加载音乐`);
429
        return newElement;
430
      } else {
431
        // 如果失败，尝试下一个备用 API
432
        return retryWithFallbackAPI(container, fallbackApis, currentIndex + 1);
433
      }
434
    }
435

436
    // 加载 MetingJS
437
    function loadMetingJS() {
438
      return new Promise((resolve) => {
439
        if (window.customElements?.get("meting-js")) {
440
          resolve(true);
441
          return;
442
        }
443

444
        const metingScript = document.createElement("script");
445
        metingScript.src = metingJsPath;
446
        metingScript.async = true;
447
        metingScript.onload = async () => {
448
          // 等待 MetingJS 元素创建
449
          await new Promise(resolve => setTimeout(resolve, 100));
450

451
          const container = document.getElementById('aplayer-container');
452
          if (!container) {
453
            resolve(false);
454
            return;
455
          }
456

457
          let metingElement = container.querySelector('meting-js');
458

459
          if (config.mode === "meting" && config.meting?.api && metingElement) {
460
            const server = config.meting.server || 'netease';
461
            const type = config.meting.type || 'playlist';
462
            const id = config.meting.id || '';
463

464
            // 替换 API URL 中的占位符
465
            let mainApiUrl = config.meting.api
466
              .replace(':server', server)
467
              .replace(':type', type)
468
              .replace(':id', id)
469
              .replace(':r', Math.random().toString());
470

471
            // 设置全局 API
472
            window.meting_api = mainApiUrl;
473

474
            console.log('尝试使用主 API:', mainApiUrl);
475

476
            // 等待元素初始化
477
            await new Promise(resolve => setTimeout(resolve, 500));
478

479
            // 检查主 API 是否成功
480
            const mainApiSuccess = await checkMetingSuccess(metingElement, 5000);
481

482
            if (!mainApiSuccess && config.meting.fallbackApis && config.meting.fallbackApis.length > 0) {
483
              // 主 API 失败，尝试备用 API
484
              console.warn('主 API 失败，尝试使用备用 API');
485
              const newElement = await retryWithFallbackAPI(container, config.meting.fallbackApis);
486
              if (newElement) {
487
                metingElement = newElement;
488
              }
489
            }
490
          }
491

492
          // 设置播放器（如果元素存在）
493
          if (metingElement) {
494
            await setupMetingElement(metingElement);
495
          }
496

497
          resolve(true);
498
        };
499
        metingScript.onerror = () => {
500
          console.error("Failed to load MetingJS");
501
          resolve(false);
502
        };
503
        document.head.appendChild(metingScript);
504
      });
505
    }
506

507
    // 初始化本地音乐播放器（多个音乐）
508
    async function initLocalPlayer() {
509
      if (
510
        config.mode !== "local" ||
511
        !processedLocalPlaylist ||
512
        processedLocalPlaylist.length <= 1
513
      ) {
514
        return;
515
      }
516

517
      const APlayerClass = await loadAPlayer();
518
      if (!APlayerClass) return;
519

520
      const container = document.getElementById("local-aplayer");
521
      if (!container) return;
522

523
      // 使用预处理好的路径列表（已经在服务端处理了非根目录部署的问题）
524
      const audioList = processedLocalPlaylist.map((song) => ({
525
        name: song.name,
526
        artist: song.artist,
527
        url: song.url,
528
        cover: song.cover,
529
        lrc: song.lrc || undefined,
530
        type: "auto",
531
      }));
532

533
      const aplayerOptions = {
534
        container: container,
535
        audio: audioList,
536
        mutex: config.player?.mutex !== false,
537
        lrcType: config.player?.lrcType !== undefined ? config.player.lrcType : 0,
538
        fixed: config.player?.fixed ?? true,
539
        mini: config.player?.mini ?? true,
540
        autoplay: config.player?.autoplay || false, // 直接设置 autoplay，浏览器可能会阻止但可以后续通过用户交互恢复
541
        theme: config.player?.theme || "#b7daff",
542
        loop: config.player?.loop || "all",
543
        order: config.player?.order || "list",
544
        preload: config.player?.preload || "auto",
545
        volume: config.player?.volume || 0.7,
546
        listFolded: config.player?.listFolded || false,
547
        listMaxHeight: config.player?.listMaxHeight || "340px",
548
        storageName: config.player?.storageName || "aplayer-setting",
549
      };
550

551
      try {
552
        const aplayer = new APlayerClass(aplayerOptions);
553

554
        // 监听播放状态，更新封面动画
555
        const updatePlayingState = () => {
556
          if (aplayer.container) {
557
            const isPlaying = !aplayer.paused;
558
            aplayer.container.setAttribute('data-playing', String(isPlaying));
559
            if (isPlaying) {
560
              aplayer.container.classList.add('aplayer-playing');
561
            } else {
562
              aplayer.container.classList.remove('aplayer-playing');
563
            }
564
          }
565
        };
566

567
        // 监听播放/暂停事件
568
        if (aplayer.audio) {
569
          aplayer.audio.addEventListener('play', updatePlayingState);
570
          aplayer.audio.addEventListener('pause', updatePlayingState);
571
          aplayer.audio.addEventListener('ended', updatePlayingState);
572
        }
573

574
              // 立即设置右侧定位，避免动画
575
              if (aplayer.container) {
576
                aplayer.container.setAttribute('data-positioned', 'right');
577
                // 确保立即应用右侧样式，避免从左到右的过渡
578
                requestAnimationFrame(() => {
579
                  if (aplayer.container) {
580
                    aplayer.container.style.right = '0';
581
                    aplayer.container.style.left = 'unset';
582

583
                    // 初始化播放状态
584
                    updatePlayingState();
585

586
                    // 处理移动端显示/隐藏
587
                    handleMobileVisibility(aplayer);
588

589
                    // 监听窗口大小变化，动态调整显示/隐藏
590
                    const resizeHandler = () => handleMobileVisibility(aplayer);
591
                    window.addEventListener('resize', resizeHandler);
592

593
                    // 短暂延迟后标记为已初始化，恢复展开动画
594
                    setTimeout(() => {
595
                      aplayer.container.setAttribute('data-initialized', 'true');
596

597
                      // 如果配置了默认隐藏歌词，则隐藏歌词
598
                      if (config.player?.lrcHidden && aplayer.lrc) {
599
                        aplayer.lrc.hide();
600
                        // 同时设置歌词按钮为未激活状态
601
                        const lrcButton = aplayer.container.querySelector('.aplayer-icon-lrc');
602
                        if (lrcButton) {
603
                          lrcButton.classList.add('aplayer-icon-lrc-inactivity');
604
                        }
605
                      }
606

607
                      // 如果自动播放被阻止，等待用户交互后恢复
608
                      if (config.player?.autoplay && aplayer.paused) {
609
                        tryAutoplay(aplayer);
610
                      }
611
                    }, 100);
612
                  }
613
                });
614
              }
615
      } catch (error) {
616
        console.error("Failed to initialize APlayer:", error);
617
      }
618
    }
619

620
    // 初始化容器的移动端显示/隐藏
621
    if (document.readyState === "loading") {
622
      document.addEventListener("DOMContentLoaded", initContainerMobileVisibility);
623
    } else {
624
      initContainerMobileVisibility();
625
    }
626

627
    // 如果使用 Meting 模式，加载 MetingJS
628
    if (config.mode === "meting") {
629
      loadAPlayer().then(() => {
630
        loadMetingJS();
631
      });
632
    } else if (config.mode === "local") {
633
      // 本地模式：单个音乐使用 MetingJS，多个音乐使用 APlayer
634
      if (processedLocalPlaylist && processedLocalPlaylist.length > 1) {
635
        // 多个音乐，使用 APlayer
636
        if (document.readyState === "loading") {
637
          document.addEventListener("DOMContentLoaded", initLocalPlayer);
638
        } else {
639
          initLocalPlayer();
640
        }
641
      } else {
642
        // 单个音乐，使用 MetingJS
643
        loadAPlayer().then(() => {
644
          loadMetingJS();
645
        });
646
      }
647
    }
648
  })();
649
</script>
650

651
<style>
652
  #aplayer-container {
653
    position: relative;
654
    z-index: 1000;
655
  }
656

657
  /* 确保播放器在固定模式下正确显示 */
658
  #aplayer-container .aplayer-fixed {
659
    z-index: 9999;
660
  }
661

662
  /* 禁用 APlayer 初始化时的过渡动画，避免收缩效果 */
663
  #aplayer-container .aplayer.aplayer-fixed {
664
    animation: none !important;
665
  }
666

667
  #aplayer-container .aplayer.aplayer-fixed .aplayer-body {
668
    animation: none !important;
669
    transition: none !important;
670
  }
671

672
  /* 确保播放器初始化时就在右侧位置 */
673
  #aplayer-container .aplayer.aplayer-fixed[data-positioned="right"] {
674
    right: 0 !important;
675
    left: unset !important;
676
  }
677

678
  /* 移动端隐藏 - 通过 JavaScript 动态添加类 */
679
  .aplayer-fixed.mobile-hide {
680
    display: none !important;
681
  }
682

683
  /* 移动端隐藏容器 */
684
  #aplayer-container.mobile-hide {
685
    display: none !important;
686
  }
687
</style>