网易云在线音乐播放器

九牧2025-03-142025-04-17

SPlayer 界面预览

▲ SPlayer 高颜值界面设计

SPlayer 介绍

SPlayer 是一款基于 NeteaseCloudMusicApi 构建的高颜值网易云在线音乐播放器，界面简洁清爽，无广告，在线畅听。此项目前端 (SPlayer) 是由 imsyy 开发，采用 Vue 3 + TypeScript + Naïve UI + Electron 开发，提供网页版和 Windows 客户端，适配基础的移动端体验。后端API (NeteaseCloudMusicApi) 是由 Binaryify 开发并持续维护更新的网易云音乐第三方 API。

博主前言

我的教程偏向小白用户，流程简单易懂，当然你也可以不懂，按教程操作即可轻松上手；大佬等进阶用户请随意探索。

应用特点

🎵 登录功能

支持扫码登录
支持手机号登录

🎵 签到功能

自动每日签到
自动云贝签到

🎵 桌面歌词

支持桌面歌词显示

🎵 本地模式

支持切换为本地播放器，无需网络连接

🎵 主题适配

封面主题色自动适应
支持全站着色

🎵 暗黑模式

支持 Light / Dark / Auto 模式自动切换

🎵 本地音乐管理

管理及分类本地歌曲
简易编辑音乐标签及修改封面

🎵 无版权歌曲播放

支持播放部分无版权歌曲（可能与原曲不匹配，为客户端独占功能）

🎵 下载功能

支持下载最高 Hi-Res 音质歌曲（需会员账号）

🎵 歌单管理

新建、编辑歌单
收藏 / 取消收藏歌单或歌手

🎵 推荐功能

每日推荐歌曲
私人 FM

🎵 云盘功能

上传云盘音乐
播放云盘内歌曲
纠正云盘内歌曲信息
删除云盘内歌曲

🎵 歌词功能

支持逐字歌词
歌词滚动及翻译

🎵 视频功能

支持 MV 与视频播放

🎵 播放效果

音乐频谱显示
音乐渐入渐出效果

🎵 PWA 支持

提供渐进式 Web 应用体验

🎵 评论区支持

支持评论互动

🎵 移动端适配

提供基础的移动端界面支持

事前准备

域名（非必须，你也可以使用免费域名，或者 Vercel 分配的域名也可以）
GitHub（必须，你需要注册一个 GitHub 帐号）
Vercel（必须，你需要注册一个 Vercel 帐号，你也可以直接使用 Vercel 分配的域名，当然你也可以使用 Cloudflare 部署，基本步骤流程一样。）

部署教程

部署网易云音乐 API

点击前往获取
点击前往：前往gitlab
在Gitlab Fork 项目
打开：https://gitlab.com/Binaryify/neteasecloudmusicapi，Fork 项目。
部署到 Vercel
首先打开：https://vercel.com/new去部署 网易云音乐 API ，选择 GitLab 并选择你 Fork 的此项目并点击 Import。
PROJECT NAME 自己填，这是项目名称，我就默认了，然后直接点 Deploy 接着等部署完成即可。

5.去控制面板， Domains 下方的地址可以直接打开，其实这个地址也是你的网易云音乐 API ，但是呢，我们不使用这个地址。因为大陆使用这个vercel提供给你的地址，你基本没法使用被墙的。除非你用科学上网才能正常使用，但你不可能时时刻刻都挂着科学上网吧。

6.给 网易云音乐 API 设置 Vercel-CDN加速 ，使网站项目速度大幅提高，提升国内用户的访问体验，解析成功的域名就是你的 网易云音乐 API ，详细教程如下：

https://vercel.001315.xyz/

到此完成网易云API部署的所有设置，获得网易云音乐 API 地址，如下图中这个地址是下方步骤填写在 VITE_API_URL 中的切记别写错。

部署前端 SPlayer

Fork 项目
打开：https://github.com/imsyy/SPlayer
部署到 Vercel
打开：https://vercel.com/new，选择 GitHub 并选择你 Fork 的此项目并点击 Import。
**将 Build and Output Settings 中的 Output Directory 改为 out/renderer ， VITE_API_URL 改为 网易云音乐 API 地址 然后直接点 Deploy 这次部署时间较长。等部署完成即可。

变量设置

VITE_WEB_PORT = 14558（默认不改）
VITE_SERVER_PORT = 25884（默认不改）
VITE_API_URL = 网易云音乐 API 地址结尾不要加 /（设置这一个就行）

出现这个页面就部署成功，点击卡片可以进入浏览，但是这次也建议你按照上方设置 Vercel-CDN加速，我设置的是https://music.aizrf.com/ 将作为公开项目给大家学习研究使用，禁止用于商业及非法用途。
右上角使用扫码登录，手机号登录貌似有问题，或者我不懂设置，登录后你可以看到你自己创建的歌单，收藏的歌单。
开始畅享你的音乐生活！

免责声明

本文所涉及的项目部分功能基于网易云音乐的第三方 API 服务，仅供个人学习和研究使用，严禁用于任何商业或非法用途。

作为博主，我承诺严格遵守相关法律法规以及网易云音乐 API 的使用协议，不会利用该项目或博文进行任何违法活动。若因使用此项目引发任何纠纷或责任，均由使用者自行承担。博主不对因使用该项目造成的任何直接或间接后果负责，同时保留追究使用者违法行为的权利。

请使用者在实践中遵守相关法律法规，不得将此项目用于任何商业或非法活动。任何因违规操作而产生的后果均由使用者自行负责。同时，使用者应自行承担因使用此项目而带来的所有风险和责任。博主不对本项目所提供的服务或内容的完整性和可用性做出任何保证。

感谢您的理解与支持！

文章来源

https://blog.aizrf.com/p/SPlayer-NeteaseCloudMusicApi/

博主致谢

imsyy 提供技术支持！
Binaryify 提供技术支持！