🎵 VibePlayer — 全能媒体播放器

视觉震撼的桌面媒体中心，集成音乐、视频、B站、网盘于一体

✨ 功能概览

功能	描述
🏠 绚丽首页	粒子动画 + 光球漂浮，6 大功能卡片一键直达
🌌 粒子背景特效	Canvas 实时渲染的浮动粒子，播放时自动生成，带发光拖尾效果
💿 黑胶唱片动画	播放时自动旋转，暂停时静止，配有锥形渐变纹理和动态光晕
📊 频谱可视化	32 条彩色频谱条，播放时随机律动，颜色跟随歌曲主题变化
🎵 在线歌词搜索	本地歌曲无内嵌歌词时，一键搜索在线歌词，支持 LRC 同步滚动
📁 本地音乐库	选择本地文件夹，递归扫描并按目录树展示，点击即播（10 种格式）
🎬 本地视频播放	扫描本地视频文件，完整播放器控件（全屏/倍速/快进快退）
🔗 URL 直链播放	粘贴任意音视频 URL 直接播放，自动检测文件类型
📺 哔哩哔哩播放	粘贴 B站链接，解析视频信息，内嵌播放器直接观看
☁️ WebDAV 云盘	连接群晖/威联通/NextCloud 等网盘，直接播放音视频
📦 AList 网盘聚合	一次对接百度/阿里/123/蓝奏/夸克等所有网盘，点击即播
🎚️ 完整播放控制	进度条拖拽、音量调节、上一首/下一首、播放/暂停、倍速

🖼️ 界面截图

🏠 绚丽首页

打开应用首先看到绚丽首页，粒子动画背景 + 彩色光球漂浮，6 大功能卡片一目了然，点击即可进入对应功能。

🎵 音乐播放

选择本地音乐文件夹，黑胶唱片随音乐旋转，粒子特效和频谱可视化同步律动，完整还原桌面播放器体验。点击胶片切换歌词面板，无内嵌歌词时可搜索在线歌词。

🎬 本地视频

选择视频文件夹，支持 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

📥 下载安装

前往 Releases 下载最新版本。

macOS 用户注意

由于 VibePlayer 未使用 Apple 开发者证书签名，首次打开时可能会提示：

"Apple 无法验证 'VibePlayer' 是否包含可能危害 Mac 安全或泄漏隐私的恶意软件。"

解决方法（任选一种）：

方法一：右键点击 VibePlayer.app → 选择「打开」→ 在弹出的对话框中点击「打开」

方法二：系统设置 → 隐私与安全性 → 滚动到底部 → 点击「仍然允许」

方法三：终端执行以下命令后重新打开：

xattr -cr /Applications/VibePlayer.app

🚀 快速开始

环境要求

Node.js >= 20.19
npm >= 10

安装 & 运行

# 克隆项目
git clone https://github.com/taogejava/VibePlayer.git
cd VibePlayer

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

打包桌面应用

# 打包 Windows（安装版 + 便携版）
npm run build:win

# 打包 macOS（Universal DMG）
npm run build:mac

📝 许可证

MIT License

Built with ❤️ using React + TypeScript + Electron

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
.github/workflows		.github/workflows
build		build
docs		docs
electron		electron
public		public
resources		resources
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
README_EN.md		README_EN.md
components.json		components.json
electron-builder.yml		electron-builder.yml
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
release.sh		release.sh
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
upload-release.sh		upload-release.sh
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

🎵 VibePlayer — 全能媒体播放器

✨ 功能概览

🖼️ 界面截图

🏠 绚丽首页

🎵 音乐播放

🎬 本地视频

📺 哔哩哔哩播放

🔗 链接播放

☁️ WebDAV 云盘

📦 AList 网盘聚合

🎮 操作指南

首页导航

基本播放

播放模式

歌词显示

本地音乐库

本地视频播放

URL 直链播放

WebDAV 云盘

AList 网盘聚合

哔哩哔哩播放

🛠️ 技术栈

核心框架

UI & 样式

特效 & 可视化（自研）

数据 & 工具

📁 项目结构

📥 下载安装

macOS 用户注意

🚀 快速开始

环境要求

安装 & 运行

打包桌面应用

📝 许可证

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 4

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages