音乐播放器配置指南#

配置文件位置#

src/config/musicConfig.ts

基本配置#

1
export const musicPlayerConfig: MusicPlayerConfig = {
2
    // 是否在导航栏显示音乐播放器入口
3
    showInNavbar: true,
4

5
    // 播放模式：'meting'=使用 Meting API, 'local'=使用本地音乐
6
    mode: "meting",
7

8
    // 默认音量 (0-1)
9
    volume: 0.7,
10

11
    // 播放模式：'list'=列表循环, 'one'=单曲循环, 'random'=随机播放
12
    playMode: "list",
13

14
    // 是否显示歌词
15
    showLyrics: true,
16
},

Meting API 模式（推荐）#

Meting API 可以解析网易云音乐、QQ音乐等平台的歌单。

1. 获取网易云音乐歌单 ID#

打开网易云音乐网页版
进入你想要使用的歌单
查看浏览器地址栏中的 URL：
```
1
https://music.163.com/#/playlist?id=9493047202
```
歌单 ID 是 9493047202

2. 配置示例#

1
meting: {
2
    // Meting API 地址（默认使用官方 API）
3
    api: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",
4

5
    // 音乐平台：netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐
6
    server: "netease",
7

8
    // 类型：song=单曲, playlist=歌单, album=专辑, artist=艺术家
9
    type: "playlist",
10

11
    // 歌单 ID（替换为你自己的）
12
    id: "9493047202",
13

14
    // 认证 token（通常留空）
15
    auth: "",
16

17
    // 备用 API（当主 API 失败时使用）
18
    fallbackApis: [
19
        "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
20
        "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
21
    ],
22
},

3. 其他平台配置#

QQ 音乐：

1
server: "tencent",
2
type: "playlist",
3
id: "你的QQ音乐歌单ID",

酷狗音乐：

1
server: "kugou",
2
type: "playlist",
3
id: "你的酷狗音乐歌单ID",

本地音乐模式#

如果不想使用在线歌单，可以使用本地音乐文件。

1. 准备音乐文件#

将 MP3 文件放在 public/assets/music/ 目录下。

2. 配置示例#

1
mode: "local",
2

3
local: {
4
    playlist: [
5
        {
6
            name: "歌曲名称",
7
            artist: "歌手名称",
8
            url: "/assets/music/歌曲名称.mp3",
9
            cover: "/assets/music/cover/封面.jpg",
10
            // 歌词（可选）
11
            lrc: "[00:00.00]歌词内容...",
12
        },
13
    ],
14
},

3. 歌词文件配置#

歌词支持两种方式：

方式一：直接写入歌词内容

1
lrc: "[00:00.00]第一句歌词\n[00:05.00]第二句歌词",

方式二：引用外部 LRC 文件

1
lrc: "/assets/music/lrc/歌曲名.lrc",

播放器显示控制#

导航栏入口#

1
// 是否在导航栏显示播放器入口
2
showInNavbar: true,  // true=显示, false=隐藏

侧边栏组件#

在 src/config/sidebarConfig.ts 中配置侧边栏音乐组件：

1
{
2
    component: "MusicPlayer",
3
    enable: true,  // true=启用, false=禁用
4
},

常见问题#

Q: 播放器不显示？#

检查 showInNavbar 是否为 true
检查侧边栏配置中 MusicPlayer 是否启用
检查浏览器控制台是否有错误

Q: 歌曲无法播放？#

确认歌单 ID 是否正确
部分歌曲因版权原因可能无法播放
尝试更换备用 API

Q: 如何获取歌词？#

网易云音乐歌曲页面可以找到歌词
使用在线工具搜索 LRC 文件
手动编写 LRC 格式歌词

Q: 歌单显示不正确？#

检查 type 配置是否正确：

单曲：type: "song"
歌单：type: "playlist"
专辑：type: "album"
艺术家：type: "artist"

Q: 音乐加载缓慢？#

可以配置多个备用 API，当主 API 失败时自动切换：

1
fallbackApis: [
2
    "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id",
3
    "https://api.moeyao.cn/meting/?server=:server&type=:type&id=:id",
4
],

音乐

音乐

音乐播放器配置指南#

配置文件位置#

基本配置#

Meting API 模式（推荐）#

1. 获取网易云音乐歌单 ID#

2. 配置示例#

3. 其他平台配置#

本地音乐模式#

1. 准备音乐文件#

2. 配置示例#

3. 歌词文件配置#

播放器显示控制#

导航栏入口#

侧边栏组件#

常见问题#

Q: 播放器不显示？#

Q: 歌曲无法播放？#

Q: 如何获取歌词？#

Q: 歌单显示不正确？#

Q: 音乐加载缓慢？#

支持与分享

评论区

音乐

目录

音乐

音乐

5. 音乐播放器配置指南

音乐播放器配置指南#

配置文件位置#

基本配置#

Meting API 模式（推荐）#

1. 获取网易云音乐歌单 ID#

2. 配置示例#

3. 其他平台配置#

本地音乐模式#

1. 准备音乐文件#

2. 配置示例#

3. 歌词文件配置#

播放器显示控制#

导航栏入口#

侧边栏组件#

常见问题#

Q: 播放器不显示？#

Q: 歌曲无法播放？#

Q: 如何获取歌词？#

Q: 歌单显示不正确？#

Q: 音乐加载缓慢？#

支持与分享

评论区

音乐

目录