xiaolonglv / splayer

🎉 一个简约的在线音乐播放器，支持网易云音乐账号登录，逐字歌词，下载歌曲，展示评论区，音乐频谱，音乐云盘及歌单管理，对移动端进行了适配

SPlayer

一个简约的在线音乐播放器

本项目采用 Vue 3 全家桶及 SCSS 开发
目前主要以 PC 端为主，移动端做了基础适配，仅保证功能

👀 Demo

• SPlayer

🎉 功能

• 支持扫码登录
• 支持手机号登录（目前暂时无法使用）
• 自动进行每日签到及云贝签到
• 支持 UnblockNeteaseMusic，自动替换变灰歌曲
  • 由于酷我音源不支持 https，故网页端替换可能不全面
• 下载歌曲（最高支持 Hi-Res）
• 新建歌单及歌单编辑
• 收藏 / 取消收藏歌单或歌手
• 每日推荐歌曲
• 私人 FM
• 云盘音乐上传
• 云盘内歌曲播放
• 云盘内歌曲纠正
• 云盘歌曲删除
• 支持逐字歌词
• 歌词滚动以及歌词翻译
• MV 与视频播放
• 音乐频谱显示（ 实验性功能，需在设置中开启 ）
• 音乐渐入渐出
• 支持 PWA
• 支持评论区及评论点赞
• 明暗模式自动 / 手动切换
• 移动端基础适配

待办

• 发表评论

😍 Screenshots

主页面

播放页面

发现页面

歌单页面

评论页面

⚙️ 部署

Vercel 等托管平台可在 Fork 后一键导入并自动部署

API 服务（必需）

本程序依赖 NeteaseCloudMusicApi 运行，请确保您已成功部署该项目

• 请在根目录下的 .env 文件中的 VITE_MUSIC_API 中填入 API 地址（必需）

VITE_MUSIC_API = "your api url"

网易云解灰 API（可选）

如需使用网易云解灰服务，请前往 UNM-Server 部署在线 API 服务并将 API 地址填入 .env 环境变量中，该服务用于网页端替换无法播放或无版权的歌曲。如不需要该服务，请前往站点的 全局设置 中关闭

安装依赖

pnpm install
# 或者
yarn install
# 或者
npm install

开发

pnpm dev
# 或者
yarn dev
# 或者
npm dev

构建

pnpm build
# 或者
yarn build
# 或者
npm build

构建完成后可将生成的 dist 文件夹内的文件上传至服务器

😘 鸣谢

特此感谢为本项目提供支持与灵感的项目

• NeteaseCloudMusicApi
• YesPlayMusic
• UnblockNeteaseMusic
• BlurLyric
• Vue-mmPlayer

📜 开源许可

• 本项目仅供个人学习研究使用，禁止用于商业及非法用途
• 本项目基于 MIT license 许可进行开源

📢 免责声明

本项目使用了网易云音乐的第三方 API 服务，仅供个人学习研究使用，禁止用于商业及非法用途。 本项目旨在提供一个前端练手的实战项目，用于帮助开发者提升技能水平和对前端技术的理解

同时，本项目开发者承诺 严格遵守相关法律法规和网易云音乐 API 使用协议，不会利用本项目进行任何违法活动。 如因使用本项目而引起的任何纠纷或责任，均由使用者自行承担。本项目开发者不承担任何因使用本项目而导致的任何直接或间接责任，并保留追究使用者违法行为的权利

请使用者在使用本项目时遵守相关法律法规，不要将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。 同时，使用者应该自行承担因使用本项目而带来的风险和责任。本项目开发者不对本项目所提供的服务和内容做出任何保证