极客资料网推荐我用AI写了一个颜值拉满的桌面媒体播放器，全程没动一行代码，这就是AI编程新范式这篇文章给大家，欢迎收藏极客资料网享受知识的乐趣

🎵 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
• 上一首/下一首：点击前进/后退按钮
• 进度跳转：点击进度条任意位置
• 音量调节：拖动音量滑块或点击喇叭图标静音

播放模式

• 顺序播放：列表循环播放所有歌曲
• 单曲循环：重复播放当前歌曲
• 随机播放：随机选择下一首

歌词显示

• 查看歌词：点击黑胶唱片，右侧面板切换为歌词显示
• 在线搜索：当歌曲无内嵌歌词时，歌词面板显示「搜索在线歌词」按钮
• 同步滚动：歌词随播放进度自动滚动高亮
• 搜索结果：支持手动选择不同版本的歌词

本地音乐库

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

---

Built with ❤️ using React + TypeScript + Electron

文章来源:https://www.cnblogs.com/weipt0106/p/19883694
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！