大家好，做了一个开源桌面媒体播放器，视觉震撼的桌面媒体中心，集成音乐、视频、B站、网盘于一体
开源地址： https://github.com/taogejava/VibePlayer
⭐ 欢迎大家 Star / Issue / PR
下载地址：https://taogejava.github.io/VibePlayer/
开源MIT，放心使用
| 功能 | 描述 |
|---|---|
| 🏠 多平台 | windows+macbook |
| 🏠 绚丽首页 | 粒子动画 + 光球漂浮，6 大功能卡片一键直达 |
| 🌌 粒子背景特效 | Canvas 实时渲染的浮动粒子，播放时自动生成，带发光拖尾效果 |
| 💿 黑胶唱片动画 | 播放时自动旋转，暂停时静止，配有锥形渐变纹理和动态光晕 |
| 📊 频谱可视化 | 32 条彩色频谱条，播放时随机律动，颜色跟随歌曲主题变化 |
| 🎵 在线歌词搜索 | 本地歌曲无内嵌歌词时，一键搜索在线歌词，支持 LRC 同步滚动 |
| 📁 本地音乐库 | 选择本地文件夹，递归扫描并按目录树展示，点击即播（10 种格式） |
| 🎬 本地视频播放 | 扫描本地视频文件，完整播放器控件（全屏/倍速/快进快退） |
| 🔗 URL 直链播放 | 粘贴任意音视频 URL 直接播放，自动检测文件类型 |
| 📺 哔哩哔哩播放 | 粘贴 B站链接，解析视频信息，内嵌播放器直接观看 |
| ☁️ WebDAV 云盘 | 连接群晖/威联通/NextCloud 等网盘，直接播放音视频 |
| 📦 AList 网盘聚合 | 一次对接百度/阿里/123/蓝奏/夸克等所有网盘，点击即播 |
| 🎚️ 完整播放控制 | 进度条拖拽、音量调节、上一首/下一首、播放/暂停、倍速 |
选择本地音乐文件夹，黑胶唱片随音乐旋转，粒子特效和频谱可视化同步律动，完整还原桌面播放器体验。点击胶片切换歌词面板，无内嵌歌词时可搜索在线歌词。
现阶段仅支持30s试听。
选择视频文件夹，支持 11 种视频格式，完整播放器控件（全屏/倍速/快进快退）。
粘贴 B 站链接后，视频直接在播放器内嵌框中流畅播放，无需跳转浏览器。
粘贴任意音视频 URL，自动检测文件类型直接播放。
连接群晖/威联通/NextCloud 等服务，直接浏览并播放音视频文件。
一次对接，访问百度网盘、阿里云盘、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
支持服务：群晖 NAS、威联通、NextCloud、坚果云等所有 WebDAV 服务
支持网盘：百度网盘、阿里云盘、123云盘、蓝奏云、夸克网盘等所有已挂载存储
支持链接格式：
https://www.bilibili.com/video/BV1B7411m7LVBV1B7411m7LVav12345...?p=2| 技术 | 版本 | 说明 |
|---|---|---|
| React | 19.2 | 前端 UI 框架 |
| TypeScript | 5.9 | 类型安全 |
| Vite | 7.2 | 构建工具 & 开发服务器 |
| Electron | 35.2 | 桌面应用打包 |
| 技术 | 版本 | 说明 |
|---|---|---|
| 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
[点击进入宣传页](https://taogejava.github.io/VibePlayer/ "点击进入宣传页")
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。