SPlayer - 一款基于 NeteaseCloudMusicApi 构建的高颜值网易云在线音乐播放器。

SPlayer 🎶

SPlayer 是一款基于 NeteaseCloudMusicApi 构建的高颜值网易云在线音乐播放器,界面简洁清爽,无广告,在线畅听。

此项目前端 (SPlayer) 是由 imsyy 开发 采用 Vue 3 + TypeScript + Naïve UI + Electron 开发,提供网页版和 Windows 客户端,适配基础的移动端体验。
此项目后端API (NeteaseCloudMusicApi) 是由 Binaryify 开发 持续维护更新的网易云音乐第三方 API 。

博主前言

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

我的项目
SPlayer
introduction
introduction
周润发
收录开源,好用的互联网项目

界面预览

网页端界面预览

移动端界面预览

应用特点

  • 登录功能

    • 支持扫码登录
    • 支持手机号登录
  • 签到功能

    • 自动每日签到
    • 自动云贝签到
  • 桌面歌词

    • 支持桌面歌词显示
  • 本地模式

    • 支持切换为本地播放器,无需网络连接
  • 主题适配

    • 封面主题色自动适应
    • 支持全站着色
  • 暗黑模式

    • 支持 Light / Dark / Auto 模式自动切换
  • 本地音乐管理

    • 管理及分类本地歌曲
    • 简易编辑音乐标签及修改封面
  • 无版权歌曲播放

    • 支持播放部分无版权歌曲(可能与原曲不匹配,为客户端独占功能)
  • 下载功能

    • 支持下载最高 Hi-Res 音质歌曲(需会员账号)
  • 歌单管理

    • 新建、编辑歌单
    • 收藏 / 取消收藏歌单或歌手
  • 推荐功能

    • 每日推荐歌曲
    • 私人 FM
  • 云盘功能

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

    • 支持逐字歌词
    • 歌词滚动及翻译
  • 视频功能

    • 支持 MV 与视频播放
  • 播放效果

    • 音乐频谱显示
    • 音乐渐入渐出效果
  • PWA 支持

    • 提供渐进式 Web 应用体验
  • 评论区支持

    • 支持评论互动
  • 移动端适配

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

事前准备

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

部署教程

部署网易云音乐 API

  1. 在Gitlab Fork 项目,打开:https://gitlab.com/Binaryify/neteasecloudmusicapi 开发者的地址, 加入群组回复网易云音乐API 获得我修改的 API 版本,在原有的基础上,加入了一些不错的功能
    Gitlab Fork1
    Gitlab Fork2

  2. 首先打开https://vercel.com/new去部署 网易云音乐 API ,选择 Gitlab 并选择你 fork 的此项目并点击 import
    网易云音乐 API
    网易云音乐 API2

  3. PROJECT NAME 自己填,这是项目名称,我就默认了,然后直接点 Deploy 接着等部署完成即可。
    网易云音乐 API3

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

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

我的项目
Vercel-CDN
introduction
introduction
周润发
收录开源,好用的互联网项目

部署前端 SPlayer

  1. 在Github Fork 项目,打开:https://github.com/imsyy/SPlayer
    1

  2. 打开https://vercel.com/new去部署项目前端,选择 GitHub 并选择你 fork 的此项目并点击 import
    项目前端1
    项目前端2

  3. Build and Output Settings 中的 Output Directory 改为 out/rendererVITE_API_URL 改为 网易云音乐 API 地址 然后直接点 Deploy 这次部署时间较长。等部署完成即可。

    • 变量设置:
      1
      2
      3
      VITE_WEB_PORT = 14558(默认不改)
      VITE_SERVER_PORT = 25884(默认不改)
      VITE_API_URL = 网易云音乐 API 地址结尾不要加 /(设置这一个就行)
      项目前端3
  4. 出现这个页面就部署成功,点击卡片可以进入浏览,但是这次也建议你按照上方设置 Vercel-CDN加速 ,我设置的是https://music.aizrf.com/ 将作为公开项目给大家学习研究使用,禁止用于商业及非法用途
    项目前端4

  5. 右上角使用扫码登录,手机号登录貌似有问题,或者我不懂设置,登录后你可以看到你自己创建的歌单,收藏的歌单。
    歌单

  6. 开始畅享你的音乐生活!
    VIP

免责声明

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

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

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

感谢您的理解与支持!


博主致谢

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

相关链接

网易云音乐 在线体验 点击前往

加入群组获取 点击前往

SPlayer项目地址 点击前往

网易云音乐API 点击前往