🎵 VibePlayer — 全能媒体播放器
大家好，做了一个开源桌面媒体播放器，视觉震撼的桌面媒体中心，集成音乐、视频、B站、网盘于一体
https://github.com/taogejava/VibePlayer
⭐ 欢迎大家 Star / Issue / PR
开源MIT，放心使用
✨ 功能概览
| 功能 | 描述 |
|---|---|
| 🏠 多平台 | windows+macbook |
| 🏠 绚丽首页 | 粒子动画 + 光球漂浮，6 大功能卡片一键直达 |
| 🌌 粒子背景特效 | Canvas 实时渲染的浮动粒子，播放时自动生成，带发光拖尾效果 |
| 💿 黑胶唱片动画 | 播放时自动旋转，暂停时静止，配有锥形渐变纹理和动态光晕 |
| 📊 频谱可视化 | 32 条彩色频谱条，播放时随机律动，颜色跟随歌曲主题变化 |
| 🎵 在线歌词搜索 | 本地歌曲无内嵌歌词时，一键搜索在线歌词，支持 LRC 同步滚动 |
| 📁 本地音乐库 | 选择本地文件夹，递归扫描并按目录树展示，点击即播（10 种格式） |
| 🎬 本地视频播放 | 扫描本地视频文件，完整播放器控件（全屏/倍速/快进快退） |
| 🔗 URL 直链播放 | 粘贴任意音视频 URL 直接播放，自动检测文件类型 |
| 📺 哔哩哔哩播放 | 粘贴 B站链接，解析视频信息，内嵌播放器直接观看 |
| ☁️ WebDAV 云盘 | 连接群晖/威联通/NextCloud 等网盘，直接播放音视频 |
| 📦 AList 网盘聚合 | 一次对接百度/阿里/123/蓝奏/夸克等所有网盘，点击即播 |
| 🎚️ 完整播放控制 | 进度条拖拽、音量调节、上一首/下一首、播放/暂停、倍速 |
🖼️ 界面截图
🎵 音乐播放
选择本地音乐文件夹，黑胶唱片随音乐旋转，粒子特效和频谱可视化同步律动，完整还原桌面播放器体验。点击胶片切换歌词面板，无内嵌歌词时可搜索在线歌词。
🎬 本地视频
选择视频文件夹，支持 11 种视频格式，完整播放器控件（全屏/倍速/快进快退）。
📺 哔哩哔哩播放
粘贴 B 站链接后，视频直接在播放器内嵌框中流畅播放，无需跳转浏览器。
🔗 链接播放
粘贴任意音视频 URL，自动检测文件类型直接播放。
☁️ WebDAV 云盘
连接群晖/威联通/NextCloud 等服务，直接浏览并播放音视频文件。
📦 AList 网盘聚合
一次对接，访问百度网盘、阿里云盘、123 云盘等所有已挂载存储。
🎮 操作指南
首页导航
打开应用后默认进入绚丽首页，顶部导航栏和首页卡片提供 6 大功能入口：
| 标签 | 功能 | 说明 |
|---|---|---|
| 听音乐 | 本地音乐 | 选择本地音乐文件夹，浏览目录树并播放 |
| 看视频 | 本地视频 | 扫描本地视频文件，全屏播放（支持 11 种格式） |
| B站 | 哔哩哔哩 | 粘贴 B站链接，解析并内嵌播放 |
| 链接 | URL 直链 | 粘贴任意音视频 URL 直接播放 |
| WebDAV | 云盘 | 连接 WebDAV 服务器，浏览并播放网盘文件 |
| AList | 网盘聚合 | 连接 AList 服务器，访问所有已挂载网盘 |
基本播放
- 播放/暂停：点击底部播放按钮或按
Space - 上一首/下一首：点击前进/后退按钮
- 进度跳转：点击进度条任意位置
- 音量调节：拖动音量滑块或点击喇叭图标静音
播放模式
- 顺序播放：列表循环播放所有歌曲
- 单曲循环：重复播放当前歌曲
- 随机播放：随机选择下一首
歌词显示
- 查看歌词：点击黑胶唱片，右侧面板切换为歌词显示
- 在线搜索：当歌曲无内嵌歌词时，歌词面板显示「搜索在线歌词」按钮
- 同步滚动：歌词随播放进度自动滚动高亮
- 搜索结果：支持手动选择不同版本的歌词
本地音乐库
- 点击顶部「听音乐」标签
- 点击「选择文件夹」按钮
- 在系统弹窗中选择音乐文件夹
- 等待扫描完成，目录树自动展示
- 点击左侧箭头展开/折叠文件夹
- 点击歌曲名称即可播放
支持格式：MP3、FLAC、WAV、AAC、M4A、OGG、OPUS、WMA、AIFF、APE
本地视频播放
- 点击顶部「看视频」标签
- 点击「选择文件夹」按钮
- 选择视频文件夹，等待扫描完成
- 在视频文件树中点击视频即可全屏播放
- 支持倍速、快进快退、音量调节、全屏切换
支持格式：MP4、MKV、WebM、AVI、MOV、WMV、FLV、M4V、TS、RMVB、3GP
URL 直链播放
- 点击顶部「链接」标签
- 在输入框中粘贴音视频 URL
- 点击「播放」按钮
- 自动检测文件类型，音频加入播放列表，视频全屏播放
WebDAV 云盘
- 点击顶部「WebDAV」标签
- 输入 WebDAV 服务器地址、用户名和密码
- 点击「连接」按钮
- 浏览目录，点击音视频文件即可播放
- 历史连接自动保存
支持服务：群晖 NAS、威联通、NextCloud、坚果云等所有 WebDAV 服务
AList 网盘聚合
- 点击顶部「AList」标签
- 输入 AList 服务器地址和 Token
- 点击「连接」按钮
- 浏览目录，点击音视频文件即可播放
支持网盘：百度网盘、阿里云盘、123云盘、蓝奏云、夸克网盘等所有已挂载存储
哔哩哔哩播放
- 点击顶部「B站」标签
- 在输入框中粘贴 B站视频链接
- 点击「解析」按钮或按回车
- 解析成功后显示视频信息 + 内嵌播放器
支持链接格式：
- 完整链接：
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
Built with ❤️ using React + TypeScript + Electron