MusicPlayer配置位于 src/config.ts 文件中的 musicPlayerConfig 对象，控制博客的音乐播放器显示设置。

src/config.ts

export const musicPlayerConfig: MusicPlayerConfig = {
	enable: true, // 启用音乐播放器功能
	mode: "meting", // 音乐播放器模式，可选 "local" 或 "meting"
	meting_api:
		"https://www.bilibili.uno/api?server=:server&type=:type&id=:id&auth=:auth&r=:r", // Meting API 地址
	id: "14164869977", // 歌单ID
	server: "netease", // 音乐源服务器。有的meting的api源支持更多平台,一般来说,netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
	type: "playlist", // 播单类型
};

我们来详细解析 src/config.ts 文件中的 musicPlayerConfig 对象，并提供一份配置教程。

这个配置项用于在你的博客中集成一个音乐播放器，可以播放来自网易云音乐、QQ音乐等平台的在线音乐或本地音乐文件。

---

核心配置项详解

1. 启用播放器 (enable)

enable: true,

• 作用: 控制整个音乐播放器功能的开关。
• 配置:
  • true: 启用音乐播放器，它将在博客上显示并可以播放音乐。
  • false: 禁用音乐播放器，播放器将不会在页面上出现。

2. 选择播放模式 (mode)

mode: "meting",

• 作用: 定义播放器的音乐来源模式。
• 可选值:
  • "meting": (推荐) 使用 Meting API 来播放来自网易云、QQ音乐等主流音乐平台的在线音乐。这是最常用的模式，因为它无需你自己托管音乐文件。
  • "local": 使用你项目中的本地音乐文件。你需要将音乐文件放置在项目的 public 目录下，并通过后续配置指定文件路径。

3. 配置 Meting API 模式 (推荐)

当 mode 设置为 "meting" 时，以下配置项生效。

a. Meting API 地址 (meting_api)

meting_api: "https://www.bilibili.uno/api?server=:server&type=:type&id=:id&auth=:auth&r=:r",

• 作用: 指定一个可用的 Meting API 服务地址。Meting API 是一个开源项目，它充当了你的博客和各大音乐平台之间的“桥梁”，允许你通过简单的API调用获取播放列表和音乐信息。
• 配置:
  • 你可以使用一些公开的 Meting API 服务（如示例中的 bilibili.uno），也可以在你自己的服务器上搭建一个。
  • 重要: 示例中的 API 地址可能随时失效。如果发现播放器无法加载，请自行寻找一个稳定的公开 API 或搭建自己的实例。搭建教程可以参考 Meting 项目 GitHub 页面。
  • URL 中的 :server, :type, :id 等是占位符，会被下面的配置自动替换，你无需修改它们。

b. 音乐源服务器 (server)

server: "netease",

• 作用: 指定你要播放的音乐来自哪个平台,bilibili.uno 是我提供给大家的公益API服务,我只测试了支持网易云音乐。
• 常用可选值:
  • "netease": 网易云音乐
  • "tencent": QQ音乐
  • "kugou": 酷狗音乐
  • "xiami": 虾米音乐
  • "baidu": 百度音乐
• 请确保你使用的 Meting API 服务支持你选择的 server。

c. 歌单/歌曲 ID (id)

id: "14164869977",

• 作用: 这是你想要播放的歌单ID或单曲ID。
• 如何获取 ID:
  1. 打开你喜欢的音乐平台（如网易云音乐）。
  2. 找到你想要分享的歌单或歌曲。
  3. 点击“分享”，选择“复制链接”。
  4. 链接中的数字串就是 ID。
     • 示例 (歌单): https://music.163.com/playlist?id=14164869977&userid=125924154，其中 14164869977 就是歌单 ID。
     • 示例 (单曲): https://music.163.com/song?id=19723756&userid=125924154，其中 19723756 就是歌曲 ID。

d. 类型 (type)

type: "playlist",

• 作用: 告诉 API 你提供的 id 是什么类型。
• 可选值:
  • "playlist": 表示 id 是一个歌单的 ID。
  • "song": 表示 id 是一首单曲的 ID。
  • "album": 表示 id 是一个专辑的 ID。
  • "artist": 表示 id 是一个艺术家的 ID（通常会播放该艺术家的热门歌曲）。

4. 配置 Local 模式

当 mode 设置为 "local" 时，你需要提供一个本地音乐文件的列表。配置会有所不同，通常如下所示（具体字段请参考你使用的主题文档）：

// 示例 (请以你的主题实际配置为准)
mode: "local",
local: {
  songs: [
    {
      title: "歌曲标题1",
      artist: "艺术家1",
      url: "/music/song1.mp3", // 相对于 public 文件夹的路径
      cover: "/music/cover1.jpg" // (可选) 歌曲封面
    },
    {
      title: "歌曲标题2",
      artist: "艺术家2",
      url: "/music/song2.mp3",
      cover: "/music/cover2.jpg"
    }
  ]
}

• 注意: 使用 local 模式时，请确保你拥有所使用音乐文件的版权，并注意网站的带宽消耗。

本地模式配置说明

本地配置文件位于/src/components/widget/MusicPlayer.svelte，你可以在其中添加或修改本地音乐文件的列表,请注意相对路径还是绝对路径的问题。

src/components/widget/MusicPlayer.svelte

const localPlaylist = [
	{
		id: 1,
		title: "ひとり上手",
		artist: "Kaya",
		cover: "assets/music/cover/hitori.jpg",
		url: "assets/music/url/hitori.mp3",
		duration: 240,
	},
	{
		id: 2,
		title: "眩耀夜行",
		artist: "スリーズブーケ",
		cover: "assets/music/cover/xryx.jpg",
		url: "assets/music/url/xryx.mp3",
		duration: 180,
	},
	{
		id: 3,
		title: "春雷の頃",
		artist: "22/7",
		cover: "assets/music/cover/cl.jpg",
		url: "assets/music/url/cl.mp3",
		duration: 200,
	},
];

---

快速配置步骤 (以 Meting 模式为例)

1. 找到你的歌单: 在网易云音乐中创建或找到一个你喜欢的歌单。

2. 复制歌单 ID: 从歌单分享链接中复制 id 部分。

3. 填写配置:

   • 将 musicPlayerConfig.enable 设置为 true。
   • 确保 mode 为 "meting"。
   • 填写一个可用的 meting_api 地址。
   • 将 server 设置为 "netease" (如果你用的是网易云)。
   • 将 id 设置为你刚刚复制的歌单 ID。
   • 将 type 设置为 "playlist"。

   示例配置好的样子：

   export const musicPlayerConfig: MusicPlayerConfig = {
   	enable: true,
   	mode: "meting",
   	meting_api: "https://some-stable-api.com/api?server=:server&type=:type&id=:id", // 使用一个稳定的API
   	id: "你的歌单ID",      // <-- 替换成你的歌单ID
   	server: "netease",
   	type: "playlist",
   };

4. 保存并测试: 保存 config.ts 文件，启动或重启你的博客项目，检查播放器是否正常显示并能播放音乐。

---

更多的配置

在播放器组件中，还有更多的状态变量可以根据需要进行调整和使用,依然位于/src/components/widget/MusicPlayer.svelte,这个是音乐播放器的核心源代码文件,适合高级用户使用!

src/components/widget/MusicPlayer.svelte

let meting_type = musicPlayerConfig.type ?? "playlist";
let isPlaying = false;
let isExpanded = false;
let isHidden = false;
let showPlaylist = false;
let currentTime = 0;
let duration = 0;
let volume = 0.7;
let isMuted = false;
let isLoading = false;
let isShuffled = false;
let isRepeating = 0;
let errorMessage = "";
let showError = false;

let currentSong = {
	title: "示例歌曲",
	artist: "示例艺术家",
	cover: "/favicon/favicon-light-192.png",
	url: "",
	duration: 0,
};

我们来详细解析这些在 MusicPlayer.svelte 组件中定义的状态变量。

理解这些变量是自定义音乐播放器行为和外观的关键。它们控制着播放器的几乎所有动态 aspects，从播放状态到 UI 显示。

---

音乐播放器核心状态变量详解

以下是对 MusicPlayer.svelte 文件中关键状态变量的详细说明。这些变量都是使用 Svelte 的 let 关键字声明的响应式变量。

1. 基础播放状态

• isPlaying: boolean

  • 作用: 控制音乐的播放与暂停。这是最核心的状态变量。
  • 值:
    • true: 音乐正在播放中。
    • false: 音乐处于暂停或停止状态。
  • 应用: 播放/暂停按钮的图标切换（例如，从 ▶️ 变为 ⏸️）、进度条的动画等都依赖此变量。

• currentTime: number

  • 作用: 记录当前播放歌曲的已播放时间，单位为秒。
  • 值: 一个浮点数，范围从 0 到当前歌曲的 duration。
  • 应用: 用于更新进度条的填充长度、在 UI 上显示当前播放时间（例如 1:23）。通常会通过 audio 元素的 timeupdate 事件实时更新。

• duration: number

  • 作用: 记录当前播放歌曲的总时长，单位为秒。
  • 值: 一个浮点数。在歌曲开始加载前，其值可能为 0。
  • 应用: 用于计算进度条的总长度、在 UI 上显示歌曲总时长（例如 3:45）。通常在 audio 元素的 loadedmetadata 事件中获取。

2. UI 界面控制

• isExpanded: boolean

  • 作用: 控制播放器 UI 的展开与收起状态。
  • 值:
    • true: 播放器展开，可能显示更多信息（如完整的播放列表、歌词、详细的歌曲信息）。
    • false: 播放器收起，只显示最核心的控制按钮和进度条。
  • 应用: 实现一个可折叠的播放器，点击展开/收起按钮时切换此变量。

• isHidden: boolean

  • 作用: 控制整个播放器是否在页面上显示。
  • 值:
    • true: 播放器被隐藏（例如，通过 display: none 或从 DOM 中移除）。
    • false: 播放器正常显示。
  • 应用: 可以用于实现一个“隐藏播放器”的功能，比如点击一个按钮将播放器彻底隐藏起来以节省空间。

• showPlaylist: boolean

  • 作用: 控制播放列表的显示与隐藏。
  • 值:
    • true: 显示播放列表。
    • false: 隐藏播放列表。
  • 应用: 点击“列表”图标时，切换此变量以显示或隐藏包含所有歌曲的下拉列表或侧边栏。

3. 音频控制

• volume: number

  • 作用: 控制播放器的音量大小。
  • 值: 一个浮点数，范围从 0.0 (静音) 到 1.0 (最大音量)。默认值为 0.7 (70%)。
  • 应用: 绑定到一个音量滑块 (<input type="range">)，用户拖动滑块即可改变音量。它直接控制 audio 元素的 volume 属性。

• isMuted: boolean

  • 作用: 控制播放器的静音状态。
  • 值:
    • true: 播放器处于静音状态。
    • false: 播放器处于非静音状态。
  • 应用: 绑定到一个静音按钮。点击时切换状态，并相应地设置 audio 元素的 muted 属性。注意：此状态独立于 volume 值，静音时只是暂时关闭声音输出，音量值本身不会改变。

4. 播放模式控制

• isShuffled: boolean(更新中)

  • 作用: 控制是否启用随机播放模式。
  • 值:
    • true: 启用随机播放。下一首歌曲将从播放列表中随机选择。
    • false: 禁用随机播放。歌曲将按顺序播放。
  • 应用: 绑定到一个“随机”或“ shuffle”按钮。点击时切换状态，并更新播放列表的下一曲逻辑。

• isRepeating: number

  • 作用: 控制循环播放模式。
  • 值:
    • 0: (默认) 不循环。播放列表播放完毕后停止。
    • 1: 单曲循环。当前歌曲播放完毕后，会自动重新开始播放。
    • 2: 列表循环。播放列表中的所有歌曲播放完毕后，会自动从头开始播放。
  • 应用: 绑定到一个“循环”按钮。点击时可以在不同的循环模式间切换（例如 0 -> 1 -> 2 -> 0...），并更新相应的播放逻辑。

5. 数据与状态

• currentSong: object

  • 作用: 存储当前正在播放或即将播放的歌曲的详细信息。
  • 结构:

    {
      title: string;   // 歌曲标题
      artist: string;  // 艺术家/歌手名
      cover: string;   // 专辑封面图片的URL
      url: string;     // 歌曲音频文件的URL
      duration: number;// 歌曲时长（秒）
    }

  • 应用: UI 上显示的歌曲标题、艺术家、封面图片等都来源于此对象。当切换歌曲时，此对象会被更新为新歌曲的信息。

• meting_type: string

  • 作用: 从全局配置中读取并存储当前播放列表的类型（如单曲、歌单、专辑）。
  • 值: 默认为 "playlist"，实际值来自 musicPlayerConfig.type。
  • 应用: 主要用于内部逻辑，特别是在与 Meting API 交互时，确保请求的是正确类型的资源。

6. 加载与错误处理

• isLoading: boolean

  • 作用: 指示播放器是否正在加载歌曲数据或音频资源。
  • 值:
    • true: 正在加载中。
    • false: 加载完成或未在加载。
  • 应用: 显示加载指示器（如 spinner 或 "加载中..." 文本），提升用户体验。通常在开始请求歌曲信息或加载新音频时设为 true，在 loadeddata 或 error 事件中设为 false。

• errorMessage: string

  • 作用: 存储当播放器发生错误时的错误信息。
  • 值: 一个描述错误的字符串，默认为空。
  • 应用: 当发生错误（如网络错误、音频文件损坏）时，将错误信息存入此变量。

• showError: boolean

  • 作用: 控制是否在 UI 上显示错误信息。
  • 值:
    • true: 显示错误信息。
    • false: 隐藏错误信息。
  • 应用: 与 errorMessage 配合使用。当 showError 为 true 时，在界面上某个位置显示 errorMessage 的内容，告知用户发生了什么问题。

---

通过理解和操作这些状态变量，你可以完全掌控 MusicPlayer.svelte 组件的行为，实现你想要的任何自定义功能和界面效果。

版权所有

版权归属：LyraVoid Team

许可证：署名 4.0 国际 (CC-BY-4.0)

贡献者: 葉桜

上一页Giscus评论系统配置

下一页Live2d