基于 Bilibili 视频音源的跨平台桌面音乐播放器
BiliMusic 是一款基于 Electron + Vue 3 构建的桌面音乐播放器，以 Bilibili 视频为音乐源，支持搜索、音频播放、歌词同步显示、B 站账号登录、收藏夹管理以及独立的桌面歌词窗口。
| 功能 | 说明 |
|---|---|
| 🔍 搜索 | 调用搜索 API 获取音乐视频，支持搜索建议、热搜排行、搜索历史持久化 |
| 获取视频音频流播放，支持播放控制、进度拖拽、音量调节 | |
| 📃 歌词同步 | 优先获取视频字幕，回退至第三方歌词源，LRC 格式解析，支持多源切换 |
| 🔐 B 站登录 | 二维码扫码登录，Cookie 持久化 |
| ⭐ 收藏管理 | 浏览收藏夹、加载收藏歌曲、一键收藏/取消，状态实时同步 |
| 📋 播放列表 | 队列管理（添加、删除），当前曲目高亮 + 音频条动画，localStorage 持久化 |
| 🔁 播放模式 | 顺序播放、随机播放、单曲循环三种模式一键切换 |
| 🖥️ 桌面歌词 | 独立窗口，歌词动画，自动调整字号，锁定/穿透模式，拖拽移动，置顶显示 |
| 🎛️ 设置面板 | 收藏夹选择器、音频/歌词 LRU 缓存上限调节、缓存用量查看与清理 |
| 层级 | 技术 |
|---|---|
| 🏗️ 桌面框架 | Electron 33+ — 主进程 + 渲染进程隔离 |
| 🎨 前端框架 | Vue 3 + Vue Router 4（Hash History） |
| 📦 状态管理 | Pinia 3 — 三个 Store（player / user / toast） |
| 🧩 UI 组件 | Reka UI 2 — Autocomplete, Slider, Dialog, Select, Tooltip, Toast, NumberField |
| 🎭 图标 | Iconify（@iconify/vue）— Material Design Icons |
| ⚡ 构建工具 | Vite 6 + vite-plugin-electron |
| 📦 包管理 | Bun |
| 🔲 二维码 | qrcode — 登录二维码生成 |
| 🎵 歌词源 | 视频自带字幕 + 第三方歌词 API（QQ 音乐 / 网易云） |
BiliMusic/
├── 📁 electron/ # Electron 主进程
│ ├── 📁 api/ # 数据 API 层
│ └── 📁 preload/ # 桌面歌词窗口 preload
├── 📁 pages/
│ └── 📁 desktop-lyrics/ # 桌面歌词独立窗口
├── 📁 src/ # Vue 3 渲染进程
│ ├── 📁 components/ # 功能组件
│ ├── 📁 router/ # 路由配置
│ ├── 📁 stores/ # Pinia 状态管理
│ └── 📁 styles/ # 全局样式
├── 📁 dist-electron/ # 构建输出
├── index.html / vite.config.mjs / package.json 等
- Bun ≥ 1.0（推荐，也可用 npm/pnpm）
- Node.js ≥ 18
- 操作系统：macOS / Windows / Linux
# 克隆仓库
git clone https://github.com/Lonely-Sails/BiliMusic.git
cd BiliMusic
# 安装依赖（使用 Bun）
bun install
# 🎯 启动开发模式（Vite 热重载 + Electron 窗口）
bun run dev
# 📦 构建生产版本
bun run build
# 🚀 启动生产版 Electron 应用
bun run startnpm install
npm run dev| 命令 | 说明 |
|---|---|
bun run dev |
启动 Vite 开发服务器 + Electron 窗口，Vue 文件热重载，主进程自动重启 |
bun run build |
Vite 构建 + 复制 electron/api/ 和 electron/preload/ 到 dist-electron/ |
bun run start |
以生产模式启动 Electron（加载 dist/ 中的构建产物） |
┌──────────────────────────────────────────────────────────┐
│ 渲染进程 (Vue 3) │
│ window.electronAPI.invoke(channel, args...) │
│ │ ▲ │
│ │ ipcRenderer.invoke() │ return │
│ ▼ │ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Electron 主进程 (Node.js) │ │
│ │ ipcMain.handle(channel, handler) │ │
│ │ │ │
│ │ ┌─────────┐ ┌──────────┐ ┌────────────────┐ │ │
│ │ │ 搜索 API │ │ 视频 API │ │ 认证 / 收藏 API │ │ │
│ │ └────┬────┘ └────┬─────┘ └───────┬────────┘ │ │
│ │ │ │ │ │ │
│ │ ▼ ▼ ▼ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ HTTP 客户端 + 签名 + Cookie │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 桌面歌词窗口 ←──── IPC send ──── 主进程 │
└──────────────────────────────────────────────────────────┘
- 数据缓存：音频 URL 和歌词数据使用 LRU 淘汰策略，缓存上限可自定义
- 会话持久化：登录状态安全保存，重启后自动恢复
- CSP 安全策略：严格的 Content-Security-Policy
- 错误处理：全局错误捕获三层兜底
- 搜索防抖：避免频繁请求
本项目基于 Apache License Version 2.0 开源。
- 本项目仅用于学习和研究，不提供任何形式的商业服务
- 所有音乐内容来自对应视频平台，版权归原作者及平台所有