视觉震撼的桌面媒体中心，集成音乐、视频、B站、网盘于一体
--- ## ✨ 功能概览 | 功能 | 描述 | |------|------| | 🏠 绚丽首页 | 粒子动画 + 光球漂浮，6 大功能卡片一键直达 | | 🌌 粒子背景特效 | Canvas 实时渲染的浮动粒子，播放时自动生成，带发光拖尾效果 | | 💿 黑胶唱片动画 | 播放时自动旋转，暂停时静止，配有锥形渐变纹理和动态光晕 | | 📊 频谱可视化 | 32 条彩色频谱条，播放时随机律动，颜色跟随歌曲主题变化 | | 🎵 在线歌词搜索 | 本地歌曲无内嵌歌词时，一键搜索在线歌词，支持 LRC 同步滚动 | | 🎵 在线音乐搜索 | iTunes API 模糊搜索，试听 30s 免版权预览，一键加入播放列表 | | 📁 本地音乐库 | 选择本地文件夹，递归扫描并按目录树展示，点击即播（10 种格式） | | 🎬 本地视频播放 | 扫描本地视频文件，完整播放器控件（全屏/倍速/快进快退） | | 🔗 URL 直链播放 | 粘贴任意音视频 URL 直接播放，自动检测文件类型 | | 📺 哔哩哔哩播放 | 粘贴 B站链接，解析视频信息，内嵌播放器窗口内直接观看 | | ☁️ WebDAV 云盘 | 连接群晖/威联通/NextCloud 等网盘，直接播放音视频 | | 📦 AList 网盘聚合 | 一次对接百度/阿里/123/蓝奏/夸克等所有网盘，点击即播 | | 🎚️ 完整播放控制 | 进度条拖拽、音量调节、上一首/下一首、播放/暂停、倍速 | --- ## 🖼️ 界面截图 ### 🏠 绚丽首页  打开应用首先看到绚丽首页，粒子动画背景 + 彩色光球漂浮，6 大功能卡片一目了然，点击即可进入对应功能。 ### 🎵 音乐播放  选择本地音乐文件夹，黑胶唱片随音乐旋转，粒子特效和频谱可视化同步律动，完整还原桌面播放器体验。 ### 🎵 在线音乐搜索  通过 iTunes API 模糊搜索歌曲，试听 30 秒免版权预览，一键加入播放列表。 ### 🎵 歌词显示  点击黑胶唱片切换歌词面板，支持内嵌歌词和在线搜索歌词，LRC 同步滚动高亮。 ### 🎬 本地视频  选择视频文件夹，支持 11 种视频格式，完整播放器控件（全屏/倍速/快进快退）。 ### 📺 哔哩哔哩播放  粘贴 B 站链接后，视频直接在播放器内嵌框中流畅播放，无需跳转浏览器。 ### 🔗 链接播放  粘贴任意音视频 URL，自动检测文件类型直接播放。 ### ☁️ WebDAV 云盘  连接群晖/威联通/NextCloud 等服务，直接浏览并播放音视频文件。 ### 📦 AList 网盘聚合  一次对接，访问百度网盘、阿里云盘、123 云盘等所有已挂载存储。 --- ## 🎮 操作指南 ### 首页导航 打开应用后默认进入绚丽首页，顶部导航栏和首页卡片提供 6 大功能入口： | 标签 | 功能 | 说明 | |------|------|------| | 听音乐 | 本地音乐 | 选择本地音乐文件夹，浏览目录树并播放 | | 看视频 | 本地视频 | 扫描本地视频文件，全屏播放（支持 11 种格式） | | B站 | 哔哩哔哩 | 粘贴 B站链接，解析并内嵌播放 | | 链接 | URL 直链 | 粘贴任意音视频 URL 直接播放 | | WebDAV | 云盘 | 连接 WebDAV 服务器，浏览并播放网盘文件 | | AList | 网盘聚合 | 连接 AList 服务器，访问所有已挂载网盘 | ### 基本播放 - **播放/暂停**：点击底部播放按钮或按 `Space` - **上一首/下一首**：点击前进/后退按钮 - **进度跳转**：点击进度条任意位置 - **音量调节**：拖动音量滑块或点击喇叭图标静音 ### 播放模式 - **顺序播放**：列表循环播放所有歌曲 - **单曲循环**：重复播放当前歌曲 - **随机播放**：随机选择下一首 ### 歌词显示 - **查看歌词**：点击黑胶唱片，右侧面板切换为歌词显示 - **在线搜索**：当歌曲无内嵌歌词时，歌词面板显示「搜索在线歌词」按钮 - **同步滚动**：歌词随播放进度自动滚动高亮 - **搜索结果**：支持手动选择不同版本的歌词 ### 本地音乐库 1. 点击顶部「**听音乐**」标签 2. 点击「**选择文件夹**」按钮 3. 在系统弹窗中选择音乐文件夹 4. 等待扫描完成，目录树自动展示 5. 点击左侧箭头展开/折叠文件夹 6. 点击歌曲名称即可播放 **支持格式**：MP3、FLAC、WAV、AAC、M4A、OGG、OPUS、WMA、AIFF、APE ### 本地视频播放 1. 点击顶部「**看视频**」标签 2. 点击「**选择文件夹**」按钮 3. 选择视频文件夹，等待扫描完成 4. 在视频文件树中点击视频即可全屏播放 5. 支持倍速、快进快退、音量调节、全屏切换 **支持格式**：MP4、MKV、WebM、AVI、MOV、WMV、FLV、M4V、TS、RMVB、3GP ### URL 直链播放 1. 点击顶部「**链接**」标签 2. 在输入框中粘贴音视频 URL 3. 点击「**播放**」按钮 4. 自动检测文件类型，音频加入播放列表，视频全屏播放 ### WebDAV 云盘 1. 点击顶部「**WebDAV**」标签 2. 输入 WebDAV 服务器地址、用户名和密码 3. 点击「**连接**」按钮 4. 浏览目录，点击音视频文件即可播放 5. 历史连接自动保存 **支持服务**：群晖 NAS、威联通、NextCloud、坚果云等所有 WebDAV 服务 ### AList 网盘聚合 1. 点击顶部「**AList**」标签 2. 输入 AList 服务器地址和 Token 3. 点击「**连接**」按钮 4. 浏览目录，点击音视频文件即可播放 **支持网盘**：百度网盘、阿里云盘、123云盘、蓝奏云、夸克网盘等所有已挂载存储 ### 哔哩哔哩播放 1. 点击顶部「**B站**」标签 2. 在输入框中粘贴 B站视频链接 3. 点击「**解析**」按钮或按回车 4. 解析成功后显示视频信息 + 内嵌播放器 **支持链接格式**： - 完整链接：`https://www.bilibili.com/video/BV1B7411m7LV` - BV号：`BV1B7411m7LV` - AV号：`av12345` - 分P链接：`...?p=2` --- ## 🛠️ 技术栈 ### 核心框架 | 技术 | 版本 | 说明 | |------|------|------| | React | 19.2 | 前端 UI 框架 | | TypeScript | 5.9 | 类型安全 | | Vite | 7.2 | 构建工具 & 开发服务器 | | Electron | 35.2 | 桌面应用打包 | ### UI & 样式 | 技术 | 版本 | 说明 | |------|------|------| | Tailwind CSS | 3.4 | 原子化 CSS 框架 | | shadcn/ui | — | 高质量组件库（基于 Radix UI） | | Radix UI | — | 无障碍原语组件 | | lucide-react | 0.562 | 图标库 | ### 特效 & 可视化（自研） | 模块 | 技术 | |------|------| | 粒子背景 | HTML5 Canvas + requestAnimationFrame | | 频谱可视化 | Canvas 2D | | 黑胶唱片旋转 | CSS Keyframes | | 首页光球动画 | CSS Keyframes + 绝对定位 | ### 数据 & 工具 | 技术 | 版本 | 说明 | |------|------|------| | react-hook-form | 7.70 | 表单管理 | | zod | 4.3 | 数据验证 | | date-fns | 4.1 | 日期处理 | | recharts | 2.15 | 图表组件 | --- ## 📁 项目结构 ``` app/ ├── docs/ │ ├── index.html # GitHub Pages 宣传页 │ └── screenshots/ # 界面截图 ├── src/ │ ├── sections/ # 核心业务模块 │ │ ├── HomePage.tsx # 绚丽首页（功能卡片导航） │ │ ├── MusicPlayer.tsx # 主播放器容器（6 大面板） │ │ ├── PlayerControls.tsx # 播放控制栏 │ │ ├── SpectrumVisualizer.tsx # 频谱可视化 │ │ ├── ParticleBackground.tsx # 粒子背景特效 │ │ ├── LyricsPanel.tsx # 歌词显示面板 │ │ ├── LocalFileTree.tsx # 本地音乐目录树 │ │ ├── VideoFileTree.tsx # 本地视频目录树 │ │ ├── VideoPlayer.tsx # 视频播放器 │ │ ├── UrlPlayPanel.tsx # URL 直链播放面板 │ │ ├── BilibiliPanel.tsx # 哔哩哔哩面板 │ │ ├── WebDAVPanel.tsx # WebDAV 云盘面板 │ │ └── AListPanel.tsx # AList 网盘聚合面板 │ ├── hooks/ # 自定义 React Hooks │ │ ├── useLocalLibrary.ts # 本地文件管理 │ │ ├── useVideoLibrary.ts # 视频文件管理 │ │ ├── useLyricsSearch.ts # 在线歌词搜索 │ │ ├── useBilibili.ts # B站解析逻辑 │ │ ├── useWebDAV.ts # WebDAV 协议客户端 │ │ └── useAList.ts # AList API 客户端 │ ├── components/ │ │ └── ui/ # shadcn/ui 通用组件 │ ├── lib/ # 工具函数 │ ├── App.tsx # 应用入口（首页路由） │ └── main.tsx # 渲染入口 ├── electron/ # Electron 主进程 ├── index.html ├── package.json ├── electron-builder.yml ├── tailwind.config.js ├── vite.config.ts └── tsconfig.json ``` --- ## 📥 下载安装 前往 [Releases](https://github.com/taogejava/VibePlayer/releases) 下载最新版本。 ### macOS 用户注意 由于 VibePlayer 未使用 Apple 开发者证书签名，首次打开时可能会提示： > "Apple 无法验证 'VibePlayer' 是否包含可能危害 Mac 安全或泄漏隐私的恶意软件。" **解决方法（任选一种）：** **方法一**：右键点击 VibePlayer.app → 选择「打开」→ 在弹出的对话框中点击「打开」 **方法二**：系统设置 → 隐私与安全性 → 滚动到底部 → 点击「仍然允许」 **方法三**：终端执行以下命令后重新打开： ```bash xattr -cr /Applications/VibePlayer.app ``` --- ## 🚀 快速开始 ### 环境要求 - Node.js >= 20.19 - npm >= 10 ### 安装 & 运行 ```bash # 克隆项目 git clone https://github.com/taogejava/VibePlayer.git cd VibePlayer # 安装依赖 npm install # 启动开发服务器 npm run dev # 构建生产版本 npm run build ``` ### 打包桌面应用 ```bash # 打包 Windows（安装版 + 便携版） npm run build:win # 打包 macOS（Universal DMG） npm run build:mac ``` --- ## 📝 许可证 MIT License ---Built with ❤️ using React + TypeScript + Electron