dufu1991 / simple-cloud-music

简洁的的第三方网易云音乐播放器

🉐 停止服务

收到网易云音乐官方邮件，说简易云音乐侵权，将不再对外提供服务，有需要的朋友请自行部署。

简易云音乐

简洁的的第三方网易云音乐播放器

🌎 访问  |   👨🏻‍💻 GitHub

🌼 技术与特性

1. 主要技术栈包含 PWA、 Svelte 、rollup、svelte-stack-router、svelte-lazy 等。

2. 支持网易云音乐账号登录（扫码、手机密码或验证码、邮箱密码）。

3. 支持歌词翻译和滚动显示。

4. 支持私人 FM、每日推荐、心动模式等。

5. 支持查看歌曲热评（可开关），过滤评论广告与官方硬塞热评，四楼终于不再是广告了！

6. 每日自动签到（上送 Android 端签到，因为积分最高）。

7. 推荐 PWA 模式使用，Chrome 和 Edge 浏览器根据首次打开时的提示安装，Safari 手动安装。

8. 播放器最大化时支持下滑最小化，最小化模式支持左滑切换下一曲，滑动支持速度判断。

9. 更多特性开发中。

10. 前端菜鸟一枚，水平有限，期待大佬提出改进意见。

🍽️ 如何食用

1. 本应用使用了 PWA 技术，本质还是网页应用，只是对比纯网页体验有所提升。请将图标添加至设备桌面使用，相当于将网页书签放置桌面，方便快速打开，且不占用设备存储空间。

2. Android 设备建议使用较新版本的 Chrome 或 Edge 浏览器直接打开 简易云音乐 ，根据提示安装至桌面使用。国内手机自带的浏览器及其他第三方浏览器由于对 chromium 内核的魔改与阉割，对 PWA 的支持一言难尽。正常情况进入页面根据提示安装至桌面即可，或按照下图手动添加。很多手机操作系统默认会关闭 APP 将网页标签放到桌面的权限，可按照以下方式（设置--应用设置--应用管理--找到 Chrome 或者 Edge 浏览器--权限管理--添加桌面快捷方式）打开权限，不同品牌手机有些许差异，请以自己的手机系统为准。注：不知是 Microsoft 和 Google 自己不上架还是被国内应用商店出于商业目的限制了，各大主流应用商店要么无法下载，要么下载的版本都是很多年前的旧版。请自行想办法安装较新版本的 Chrome 或 Edge，或到我提供的这个地址下载。下载 Edge apk，下载 Chrome apk。

3. iOS 设备安装就很简单了，用自带的 Safari 浏览器打开 简易云音乐，按照以下提示即可安装至桌面。

💭 项目背景

想找个项目练手 Svelte，就对比了几个音乐类应用，刚好有开源的网易云 API Binaryify/NeteaseCloudMusicApi 可用，就搞了这个工程。

内容资源使用网易云音乐，UI 界面参考了 Apple Music 与 YesPlayMusic。

写一点自己使用过的一些音乐 APP 感受对比。

1. Apple Music

优点

• 无广告，界面简洁。

• 音质不虚标，会员策略简单易懂无套路。

• 资源数量相对来说还比较丰富，内容也比较多元化。

缺点

• Mac 端不知为何加载超级慢，服务器不是搬到云上贵州了吗？作为亲儿子应用不应该啊。

• 可能是使用的时间少，没有数据支撑，推荐机制的智障程度和 Siri 有的一拼。

• 根据我的个人习惯，喜欢一首歌，但一般不会喜欢这首歌的整张专辑和艺人的所有歌曲。所以 Apple Music 的音乐分类着重突出专辑与艺人维度，总感觉怪怪的。

• 可能是我自己品味太 low 或者主要针对欧美市场，官方整理的歌单与分类口味不对。

2. 网易云音乐

优点

• 推荐机制与算法真的牛逼，和 Spotify 有的一拼。

• 歌单机制是真的强大，我认为网易云应该感谢这些无私奉献的网友。

• 评论区真是有意思，你管它段子是真是假，有意思就行。

• 小众音乐、轻音乐、独立音乐人等模块做的比较好。

缺点

• 版权资源相对其他家较少，歌曲变灰很多。

• 功能大杂烩，广告满天飞。

• 在 UI 设计与用户体验方面即使算上 Apple Music 在内，早期版本的网易云音乐也是一流的。注意是之前的版本，现如今，各种广告植入，各种功能乱塞，各种奇怪的设定，举个简单的例子，歌曲评论默认按照推荐而不是点赞数排列，我想了下按推荐排列就可以在里面夹带私活了呀。

• 吃相难看，音质虚标，会员套路多。

3. QQ 音乐

优点

• 以 QQ 音乐、酷狗、酷我为代表的的腾讯音乐集团，资源齐全，齐全到国内垄断，垄断到监管部门几次约谈，约谈之后依然可以敷衍了事，不了了之。

缺点

• 界面太乱，花里胡哨，功能杂乱无章。出了个简洁版，只是先把用户当韭菜培养习惯。按照正常商业逻辑，做大做强了就要盈利就一定会夹带私活；没起来？那简单了啊，砍刀部一挥砍刀，这项目没了。不要太相信这些大厂的鬼话了，夸克就是最好的例子。

• 会员没买过，听大家的说法也是套路满满。

4. Spotify

优点

• 资源齐全，即使是华语音乐资源都很齐全，Apple 应该学习一下。

• 各个平台的客户端体验都超级棒，尤其是 Spotify Connect 功能，一个第三方开发商能做到这般体验已经相当可以了。

• 推荐机制与算法很强。

缺点

• 官方渠道会员价相对其他平台来说有点离谱，不过扪心自问了一下，这应该是消费者自己的问题。

• 在大陆地区正常网络就能访问，但是官方竟然不给个简体中文版本（可能是我笨，不知道怎么弄）。

🤷‍♂️ 已知问题或体验欠佳点

1. 播放器最大化时，由于 Android 无法阻止系统返回，iOS 无法阻止 Safari 右滑返回，进行此操作会返回上一页之后播放器才能最小化，有一点不符合操作预期，暂时无解。

2. 由于 Safari 不支持 CSS 特性 scroll-behavior: smooth（平稳滚动），手动写了 scrollSmoothTo 方法实现歌词平滑滚动，但是似乎是因为 Safari 自带的滚动延迟与自定义滚动的时间计算有冲突，若刚好在切换歌词的极短时间内手动滚动歌词会出现滚动回退现象（看人品）。考虑此需求不重要，暂不予解决（Android 原生支持 smooth，体验良好）。

3. 此应用始终是个网页应用，无法在第一级页面返回时提示即将退出应用的二次确认。

4. 目前浏览器好像没有提供完整的系统级媒体控制 API，所以无法使用线控耳机等后台方式切换下一曲等。

5. 官方歌词格式混乱，已发现的特殊情况都一一处理，可能还存在其他莫名其妙的混乱情况，查看歌词可能导致应用报错或歌词显示错误。

6. PWA 模式已经设置了仅竖屏使用，但手机横屏打开应用时页面计算的高度是横屏高度，播放器最大化与最小化就一定概率出现问题，请关闭浏览器进程（注意是浏览器进程）竖屏重新打开。

7. 虽然很多地方都做了懒加载，但是某些不适合懒加载的情况下，歌曲列表超级长的时候，由于短时间内页面要渲染大量数据，根据手机性能，可能会有延迟。

8. iOS 设备右滑返回上一页是 Safari 浏览器自带的功能，但是在 PWA 模式下右滑返回上一页会自动加载一下页面，体验不好但不影响功能。

9. iOS 的 Safari 在 PWA 模式下不能后台播放音乐？我在 Mac 的 Simulator 里面是完全没问题的，没法玩了啊。实在有此需求的可以直接在网页上使用。

10. Android 端使用的时候，会在通知栏显示如下提示，这是浏览器自带的通知，查了下好像没有关闭的 API 。强迫症看不下去可以关闭浏览器的通知权限，但对应的通知栏控制功能也会关闭。

⚙️ 部署

如果你有自己的服务器，建议将此应用与网易云 API 都部署至你自己的服务器，减轻我的服务器压力。

1. 部署网易云 API，详情参见 Binaryify/NeteaseCloudMusicApi。

2. 执行git clone https://github.com/dufu1991/simple-cloud-music.git克隆本仓库代码。

3. 设备安装好 node 环境之后，进入工程目录，执行 npm i 安装依赖。

4. 修改 src/utils/request.js 文件里面的 baseURL 为你的网易云 API 地址，执行 npm run dev 启动本地联调，此时访问的是 public 下面的文件。

5. 执行 npm run build 编译打包文件至 html 目录下，然后将 html 文件夹里面的文件上传到你的 Web 服务器即可访问。

6. 如果要直接部署，执行 npm run deploy 根据命令行提示输入自己的服务器地址、账号、密码、静态文件部署路径等信息，将直接将打包好的工程部署至 Web 服务器。

7. 要实现 PWA 的 Service Workers（离线访问），必须要 HTTPS 证书，关于域名、证书、服务器等相关内容请自行了解。

📜 开源许可

本项目仅供个人学习研究使用，禁止用于商业及非法用途。

基于 MIT license 许可进行开源。

🌊 灵感来源与大感谢

非常感谢 API 源代码，来自 Binaryify/NeteaseCloudMusicApi 。

• Apple Music

• Spotify

• 网易云音乐

• YesPlayMusic

📷 部分截图

🎨 Design

🪢 杂谈

• 因为 UI 界面图片区域较多，暂时不考虑暗黑模式（主要是暗黑模式对设计要求较高，做不好了啦）。
• 哦，如果想请我喝杯咖啡或是赞助一下服务器费用，也是可以的。

🚑 反馈与建议

由于主要只在 Android 设备上测试，且只用了我个人的网易云音乐账号数据，避免不了不同设备不同版本不同数据产生的 bug，望积极反馈。

• 猿类请到 GitHub 提 Issues 。
• 非猿类可邮件至 [email protected]

simple-cloud-music's Issues

(closed)

Hello

你好, 我想跑一下你的代码, 应该有些东西你没有上传?
我跑不起来, 好像是依赖版本不对, 因为没有lock文件
希望可以一起维护一下

IOS锁屏停止播放

大佬看看能不能解决这个问题，锁屏就歌曲就暂停了

如何清空播放列表

rt，只有清除浏览器缓存这一条办法了吗

邮箱登录账号只能15个字符

邮箱比较长 163.com都输不上了

部署报错

问题1：

readme 里这一段：

设备安装好 node 环境之后，进入工程目录，执行 node i 安装依赖。

node i 命令是不是应该是 npm install ?

问题2：

[!] Error: Could not resolve './pages/Version.svelte' from src/routes.js
Error: Could not resolve './pages/Version.svelte' from src/routes.js
    at error (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.handleResolveId (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:22287:24)
    at /root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:22250:26

应该是文件名大小写问题 ， src/pages/version.svelte 文件名改为 src/pages/Version.svelte 就好了。

问题3：

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)                          
node_modules/axios/package.json (2:8)                                                                              
1: {                                                                                                               
2:   "name": "axios",                                                                                              
           ^                                                                                                       
3:   "version": "0.21.4",                                                                                          
4:   "description": "Promise based HTTP client for the browser and node.js",                                                                                                                                                           
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)                              
    at error (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:198:30)                           
    at Module.error (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:12560:16)                                                                                                                                      
    at Module.tryParse (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:12937:25)                                                                                                                                   
    at Module.setSource (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:12842:24)              
    at ModuleLoader.addModuleSource (/root/simple-cloud-music/node_modules/rollup/dist/shared/rollup.js:22090:20)  

这个问题不知道怎么解决

node 版本为 v18.12.0

“建议 PWA 模式下使用”弹窗，增加“不再提醒”选项

有些场景下使用普通视图会更方便，希望提供选项，以禁用“建议 PWA 模式下使用”弹窗。

iOS PWA 模式中右滑手势返回动画重复播放

比如从 “我喜欢的音乐” 右滑返回 “我的主页” 时会重复播放第二遍返回动画，很抱歉我并没有录制复现视频。不过点击左上角的返回按键时则只播放一遍动画，是正常的。

PWA 模式不能后台播放，有群友说是 iOS 的限制。这是个遗憾 😢 。

手机号登录似乎只支持 +86，我目前绑定的手机号是 GV 号 🤣 。不过既然支持多种登录方式，不支持 +1 也没有什么影响。

-462：请完成验证操作

最近登录pwa应用总显示-462：请完成验证操作，点击 我知道了 以后也没有跳出验证码，同时不能听歌，这是什么情况？已禁用所有广告拦截插件。

登陆失败了

登陆报 -462

登录报 -462 网络太拥挤，请稍后重试

此问题在 NeteaseCloudMusicApi 4.8.1 版本已经修复，simple cloud music 似乎还没有更新。

https://github.com/Binaryify/NeteaseCloudMusicApi/releases/tag/v4.8.1

app name incorrect on chrome desktop

app name is '让听音乐简单一点！' but not '简易云音乐' after installed on chrome desktop

本地部署报错

运行npm i提示

npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated [email protected]: This module has moved and is now available at @rollup/plugin-replace. Please update your dependencies. This version is no longer maintained.
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.

added 160 packages, and audited 161 packages in 33s

20 packages are looking for funding
  run `npm fund` for details

5 vulnerabilities (4 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.1
npm notice Run npm install -g [email protected] to update!
npm notice

再运行npm audit fix

up to date, audited 161 packages in 5s

20 packages are looking for funding
  run `npm fund` for details

# npm audit report

lodash  <=4.17.20
Severity: critical
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-4xc9-xhrj-v574
Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm
Prototype Pollution in lodash - https://github.com/advisories/GHSA-p6mc-m468-83gw
Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm
Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-29mw-wpgm-hmr9
Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695
No fix available
node_modules/lodash
  scp2  >=0.1.0
  Depends on vulnerable versions of lodash
  Depends on vulnerable versions of ssh2
  node_modules/scp2

marked  <=4.0.9
Severity: high
Inefficient Regular Expression Complexity in marked - https://github.com/advisories/GHSA-5v2h-r2cx-5xgj
Inefficient Regular Expression Complexity in marked - https://github.com/advisories/GHSA-rrrm-qjm4-v8hf
Regular Expression Denial of Service (REDoS) in Marked - https://github.com/advisories/GHSA-4r62-v4vq-hr96
No fix available
node_modules/marked
  rollup-plugin-md  *
  Depends on vulnerable versions of marked
  node_modules/rollup-plugin-md

ssh2  <1.4.0
Severity: high
OS Command Injection in ssh2 - https://github.com/advisories/GHSA-652h-xwhf-q4h6
fix available via `npm audit fix`
node_modules/scp2/node_modules/ssh2

5 vulnerabilities (4 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

运行npm run build提示错误

src/components/PlayListCover.svelte
38: </script>
39:
40: <div class="cover" on:click={goToDetail} bind:this={coverDom}>
    ^
41:   <div class="cover-img">
42:     <Lazy height={220}>
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

请大佬指点

iOS已修复PWA后台播放支持

https://www.qumuban.com/59755.html
https://twitter.com/othermaciej/status/1491500338305667072
https://medium.com/prototyped/what-we-learned-about-pwas-and-audio-playback-10a01c6aecbd

据说iOS 15.4已经修复了对PWA应用后台音乐播放的支持

经过测试 open.spotify.com 安装PWA可以在回到桌面后继续播放

也许可以考虑把这个功能给加回来

很好用！希望能支持docker部署

有可能实现定时停止播放吗

谢谢你分享这么有趣的作品。
不知道方不方便实现定时停止播放呢，不好做就算了。

想问下作者

我最近在调研svelte，想用它写一些ui组件用于angular和react.
看到有人说：“zero runtime只是宣传口号，它并不能在所有的场景下做到zero runtime。”
所以请问下载什么情况下又runtime，又或者是否开发的组件都能兼容angular和react

拉取代码第一次启动报错，缺少依赖项

拉取代码后，npm i , npm run dev 。发现缺少依赖项

解决办法:

1. npm i @rollup/plugin-json -D
2. 修改rollup.config.js ,

import json from '@rollup/plugin-json'

      plugins: [
            json(),
      ]

3. npm run dev ，启动成功

私人FM相关问题

你好开发者，非常感谢你制作了这款网易云第三方网页应用！

在使用这款应用的过程中，我发现在成功登录后，基本每次都会弹出以下弹窗：

• 502：[object Object]
• [object Object]：[object Object]
• undefined：未知错误

并且私人FM在绝大多数情况下也不可用，点按相关按钮框会弹窗：

• [object Object]：[object Object]

即使偶然成功开始播放，在私人FM播放过程中也出现了循环播放若干首歌的情况。

初步判定为应用通过相关API获取私人FM相关数据失败导致，但本人技术力不过关，无力修复。不知开发者能否尝试修复呢？

另给出一点小建议：在搜索界面及搜索结果界面中添加「专辑」栏并返回相关结果。按专辑搜索并顺序播放对于一部分本应用的使用者来说非常的有用。

再次感谢开发者为开发本应用付出的努力。