Tip
旧版本已迁移至分支：GlassMusicPlayer-V1 | kmmusic
- 🎨 毛玻璃设计 - 现代化 UI，精致视觉效果
- 🌓 双主题切换 - 浅色/深色主题，支持系统跟随，三种背景主题
- 🎵 音频可视化 - 实时频谱/波形/圆形可视化，自适应主题配色
- 🎭 高级动画交互 - 共享元素过渡、3D封面翻转、侧边栏滑动指示器、黑胶唱片动画
- 📱 响应式布局 - 完美适配桌面端与移动端
- 🌍 国际化支持 - 中文 / English / 日本語
| 模块 | 功能亮点 |
|---|---|
| 🎵 播放器 | 黑胶唱片动画 · 唱臂联动 · 3D封面翻转切歌 · 共享元素过渡 · 实时音频可视化 · 音质选择 · 歌词同步 · 进度拖拽 |
| 🏠 发现音乐 | 首页推荐 · 排行榜 · 艺术家 · 新碟 · 歌单 |
| 🔍 搜索 | 热门搜索 · 搜索历史 · 实时联想 · 歌曲/歌单/MV/艺术家 |
| 📱 移动端 | 底部导航 · 全屏播放器抽屉 · 滑动切换 · 触控手势 |
📋 查看完整功能列表
| 模块 | 功能 |
|---|---|
| 主题视觉 | 双主题模式 · 系统跟随 · 三种背景主题 · 毛玻璃效果 · 动态颜色适配 · 路由过渡动画 |
| 首页列表 | 卡片化布局 · 推荐歌单 · 骨架屏加载 · 图片懒加载 |
| 排行榜 | 多类型切换（华语/欧美/日本/韩国） · 分页加载 |
| 搜索 | 热门搜索 · 搜索历史 · 实时联想 · 分页浏览 · 外部点击关闭 · 滑动切换 |
| 歌曲详情 | 歌词全文 · 相似推荐 · 评论弹窗 · 相关MV |
| 艺术家 | 类型/地区/首字母筛选 · 分页 · 英雄区动画 · 热门/专辑Tab |
| 专辑 | 封面英雄区 · 发行信息 · 简介折叠 · 曲目列表 |
| MV | 高清播放 · HLS流媒体 · 相关推荐 |
| 播放器 | 黑胶唱片 · 唱臂动画 · 3D封面翻转 · 共享元素过渡 · 实时音频可视化(频谱/波形/圆形) · 音质选择 · 进度拖拽 · 背景切换 · 设备状态 |
| 歌词 | 多语言切换 · 字体缩放 · 自动滚动 · 拖动定位 · 时间预览 |
| 评论 | 分页浏览 · IP归属地 · 楼中楼回复 |
| 播放列表 | 拖拽排序 · 下一首播放 · 批量删除 · 清空列表 · 历史记录管理 |
| 音频可视化 | Web Audio API · 频谱/波形/圆形三种样式 · 实时频谱分析 · 自适应主题配色 · 圆形频谱集成专辑封面 |
| 动画交互 | 共享元素过渡 · 3D封面翻转 · 侧边栏滑动指示器 · 黑胶唱片旋转 · 唱臂联动 |
| 移动端 | 响应式 · 底部导航 · 播放器抽屉 · 列表/历史滑动切换 · 艺术家列表 · 搜索结果滑动切换 |
| 多语言 | 简体中文 ✅ · English ✅ · 日本語 ✅ |
环境要求： Node.js >= 22，pnpm >= 10
# 克隆项目
git clone https://github.com/XiangZi7/GlassMusicPlayer.git
cd GlassMusicPlayer
# 安装依赖
pnpm install
# 配置环境变量
cp .env.example .env
# 启动开发服务器
pnpm dev项目提供了 .env.example 模板文件，请根据需要复制并修改：
# 开发环境
cp .env.example .env.development
# 生产环境
cp .env.example .env.production.env.development 示例：
VITE_USER_NODE_ENV = development
VITE_PUBLIC_PATH = /
VITE_ROUTER_MODE = history
VITE_APP_BASE_API = 'http://localhost:3000'.env.production 示例：
VITE_USER_NODE_ENV = production
VITE_PUBLIC_PATH = /
# 静态托管（如 GitHub Pages）建议使用 hash 模式
VITE_ROUTER_MODE = hash
VITE_APP_BASE_API = 'https://your-api-domain.com'Note
.env为通用配置，.env.development/.env.production为特定环境配置，优先级更高- 所有
.env.*（除.env.example）已被.gitignore忽略，不会提交到仓库 - 变量必须以
VITE_开头才能在客户端代码中使用
| 命令 | 说明 |
|---|---|
pnpm dev |
启动开发服务器 |
pnpm build |
构建生产环境产物 |
pnpm build:test |
构建测试环境产物 |
pnpm preview |
本地预览生产构建 |
pnpm lint |
ESLint 检查并自动修复 |
pnpm format |
Prettier 格式化代码 |
🖥️ 桌面端
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
📱 移动端
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
如何解决启动错误？
请确保 Node.js 版本 >= 22，并检查依赖安装时的错误信息。
播放器如何更改主题？
在侧边菜单栏选择「设置」，可切换主题模式和背景主题。
本项目仅用于学习和研究目的。使用该项目的用户需自行承担相关风险。本项目所使用的相关 API 和数据源均为第三方提供，使用时请遵循相关法律法规及第三方的使用条款。本项目不得用于任何商业目的，我们不对任何由于使用本项目而引起的直接或间接的损失或法律责任负责。
QQ 交流2群
|
QQ 交流群
|
- HotPulse - 全网热点聚合平台
