Giter Site home page Giter Site logo

qier222 / yesplaymusic Goto Github PK

View Code? Open in Web Editor NEW
27.1K 213.0 4.0K 47.38 MB

高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:

Home Page: https://music.qier222.com

License: MIT License

JavaScript 37.15% HTML 0.12% Vue 53.23% CSS 8.57% Shell 0.16% Dockerfile 0.19% SCSS 0.57%
vue vuex vue-router vue-cli music javascript music-player web-music-player pwa pwa-apps

yesplaymusic's Introduction


Logo

YesPlayMusic

高颜值的第三方网易云播放器
🌎 访问DEMO  |   📦️ 下载安装包  |   💬 加入交流群

Library

全新版本

全新2.0 Alpha测试版已发布,欢迎前往 Releases 页面下载。 当前版本将会进入维护模式,除重大bug修复外,不会再更新新功能。

✨ 特性

  • ✅ 使用 Vue.js 全家桶开发
  • 🔴 网易云账号登录(扫码/手机/邮箱登录)
  • 📺 支持 MV 播放
  • 📃 支持歌词显示
  • 📻 支持私人 FM / 每日推荐歌曲
  • 🚫🤝 无任何社交功能
  • 🌎️ 海外用户可直接播放(需要登录网易云账号)
  • 🔐 支持 UnblockNeteaseMusic,自动使用各类音源替换变灰歌曲链接 (网页版不支持)
    • 「各类音源」指默认启用的音源。
    • YouTube 音源需自行安装 yt-dlp
  • ✔️ 每日自动签到(手机端和电脑端同时签到)
  • 🌚 Light/Dark Mode 自动切换
  • 👆 支持 Touch Bar
  • 🖥️ 支持 PWA,可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
  • 🟥 支持 Last.fm Scrobble
  • ☁️ 支持音乐云盘
  • ⌨️ 自定义快捷键和全局快捷键
  • 🎧 支持 Mpris
  • 🛠 更多特性开发中

📦️ 安装

Electron 版本由 @hawtim@qier222 适配并维护,支持 macOS、Windows、Linux。

访问本项目的 Releases 页面下载安装包。

  • macOS 用户可以通过 Homebrew 来安装:brew install --cask yesplaymusic

  • Windows 用户可以通过 Scoop 来安装:scoop install extras/yesplaymusic

⚙️ 部署至 Vercel

除了下载安装包使用,你还可以将本项目部署到 Vercel 或你的服务器上。下面是部署到 Vercel 的方法。

本项目的 Demo (https://music.qier222.com) 就是部署在 Vercel 上的网站。

Powered by Vercel

  1. 部署网易云 API,详情参见 Binaryify/NeteaseCloudMusicApi 。你也可以将 API 部署到 Vercel。

  2. 点击本仓库右上角的 Fork,复制本仓库到你的 GitHub 账号。

  3. 点击仓库的 Add File,选择 Create new file,输入 vercel.json,将下面的内容复制粘贴到文件中,并将 https://your-netease-api.example.com 替换为你刚刚部署的网易云 API 地址:

{
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}
  1. 打开 Vercel.com,使用 GitHub 登录。

  2. 点击 Import Git Repository 并选择你刚刚复制的仓库并点击 Import。

  3. 点击 PERSONAL ACCOUNT 旁边的 Select。

  4. 点击 Environment Variables,填写 Name 为 VUE_APP_NETEASE_API_URL,Value 为 /api,点击 Add。最后点击底部的 Deploy 就可以部署到 Vercel 了。

⚙️ 部署到自己的服务器

除了部署到 Vercel,你还可以部署到自己的服务器上

  1. 部署网易云 API,详情参见 Binaryify/NeteaseCloudMusicApi
  2. 克隆本仓库
git clone --recursive https://github.com/qier222/YesPlayMusic.git
  1. 安装依赖
yarn install
  1. (可选)使用 Nginx 反向代理 API,将 API 路径映射为 /api,如果 API 和网页不在同一个域名下的话(跨域),会有一些 bug。

  2. 复制 /.env.example 文件为 /.env,修改里面 VUE_APP_NETEASE_API_URL 的值为网易云 API 地址。本地开发的话可以填写 API 地址为 http://localhost:3000,YesPlayMusic 地址为 http://localhost:8080。如果你使用了反向代理 API,可以填写 API 地址为 /api

VUE_APP_NETEASE_API_URL=http://localhost:3000
  1. 编译打包
yarn run build
  1. /dist 目录下的文件上传到你的 Web 服务器

⚙️ Docker 部署

  1. 构建 Docker Image
docker build -t yesplaymusic .
  1. 启动 Docker Container
docker run -d --name YesPlayMusic -p 80:80 yesplaymusic
  1. Docker Compose 启动
docker-compose up -d

YesPlayMusic 地址为 http://localhost

⚙️ 部署至 Replit

  1. 新建 Repl,选择 Bash 模板

  2. 在 Replit shell 中运行以下命令

bash <(curl -s -L https://raw.githubusercontent.com/qier222/YesPlayMusic/main/install-replit.sh)
  1. 首次运行成功后,只需点击绿色按钮 Run 即可再次运行

  2. 由于 replit 个人版限制内存为 1G(教育版为 3G),构建过程中可能会失败,请再次运行上述命令或运行以下命令:

cd /home/runner/${REPL_SLUG}/music && yarn install && yarn run build

👷‍♂️ 打包客户端

如果在 Release 页面没有找到适合你的设备的安装包的话,你可以根据下面的步骤来打包自己的客户端。

  1. 打包 Electron 需要用到 Node.js 和 Yarn。可前往 Node.js 官网 下载安装包。安装 Node.js 后可在终端里执行 npm install -g yarn 来安装 Yarn。

  2. 使用 git clone --recursive https://github.com/qier222/YesPlayMusic.git 克隆本仓库到本地。

  3. 使用 yarn install 安装项目依赖。

  4. 复制 /.env.example 文件为 /.env

  5. 选择下列表格的命令来打包适合的你的安装包,打包出来的文件在 /dist_electron 目录下。了解更多信息可访问 electron-builder 文档

命令 说明
yarn electron:build --windows nsis:ia32 Windows 32 位
yarn electron:build --windows nsis:arm64 Windows ARM
yarn electron:build --linux deb:armv7l Debian armv7l(树莓派等)
yarn electron:build --macos dir:arm64 macOS ARM

💻 配置开发环境

本项目由 NeteaseCloudMusicApi 提供 API。

运行本项目

# 安装依赖
yarn install

# 创建本地环境变量
cp .env.example .env

# 运行(网页端)
yarn serve

# 运行(electron)
yarn electron:serve

本地运行 NeteaseCloudMusicApi,或者将 API 部署至 Vercel

# 运行 API (默认 3000 端口)
yarn netease_api:run

☑️ Todo

查看 Todo 请访问本项目的 Projects

欢迎提 Issue 和 Pull request。

📜 开源许可

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

基于 MIT license 许可进行开源。

灵感来源

API 源代码来自 Binaryify/NeteaseCloudMusicApi

🖼️ 截图

lyrics library-dark album home-2 artist search home explore

yesplaymusic's People

Contributors

8790 avatar bakerbunker avatar beadre avatar chen310 avatar colawithsauce avatar daiqiangreal avatar fengkx avatar gettoset avatar grassblock1 avatar hawtim avatar karbobc avatar krishukr avatar llovvoll avatar map1en avatar mayandev avatar memorydream avatar mokurin000 avatar mrwillcom avatar nep-timeline avatar njzydark avatar pan93412 avatar qier222 avatar rainbowflesh avatar revincx avatar runnableair avatar shih-liang avatar vidocqh avatar wwwenjie avatar xiaogaozi avatar younglina avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yesplaymusic's Issues

建议加上评论列表

只是仅仅展示出评论(歌曲、MV)就行,并不需要可以评论的功能
毕竟评论里的人说话又好听
老网抑云了

功能心愿单,不知道好不好实现。

Snipaste_2020-12-10_21-00-26

相似歌手及相似音乐,这两项还是比较实用的。

Snipaste_2020-12-10_21-01-50

歌词及评论是锦上添花,如果有就更好了。

Snipaste_2020-12-10_21-05-19

可以像这样点击正在播放歌手的封面,跳转至歌词页面,此页面可以查看歌词及评论。

“部署网易云 API”不会编程还是挺难弄的,自己研究了好久也没弄成,还是得来麻烦大神。

适配移动端

手机端浏览器显示效果不太好,需要适配一下

关于音质问题

音质我设置的是无损格式,但播放的音乐很多都是 普通128Kbps偶尔会有几首是320Kbps,我想问是不是要账户是会员才能听到无损的。

部署的问题

image
image

网站部署成功了但是页面加载不出来,只有顶部一栏,请问这是因为API地址没有配置好吗?API也是在同一台服务器,地址要怎么填呢,需要带端口吗?

scrobble 传入参数错误

复现步骤

  1. 搜索周杰伦
  2. songs 双击屋顶
  3. 查看 scrobble 接口的 time 参数(图一)
  4. 在 demo 上没报错,但是参数类型确实错误,在本地开发的时候会有被拦截的报错。

图一
图二

可以考虑加入切换音乐质量吗?

我想要实现无损音乐播放,我看过网易云音乐的api文档,似乎获取 URL 时将 br 参数设置为 999000 即可优先获取 flac 格式,希望作者可以增加一下这个功能。

如何启用PWA

我装完之后发现chrome/edge都没有“安装”的标志出现
浏览器检测PWA应用是不是必须得给这个网站加上域名呢?
我现在是IP+端口的连接方式

为什么有些网易云上的歌听不了?

我体验了一下,登录了网易云音乐账号,我在网易云音乐上可以听《Lordly (Remix)》这张专辑的歌曲,但在 YesPlayMusic 中,这张专辑是灰色的听不了,想知道这是什么问题?

无法通过手机号和密码登陆

登陆页面选取手机号和密码进行登陆之后,还是闪回到选择登陆方式的页面。网页版的DEMO经测试没有这个问题,不知道什么原因。

歌词在切换歌曲后的显示问题

问题描述:在播放歌单中的一首带歌词的歌曲(称作A)后播放不带歌词的歌曲(称作B),将会在B的歌词界面显示A的歌词

setting按钮的位置讨论

首先setting作为一个全局页面的一个配置我觉得放在nav里会好一些 像下面这样

image

作者感觉如何呢? 如何可以的话我提交pr

音乐云盘歌曲支持请求

请问有计划支持音乐云盘歌曲播放吗,虽说现在已经可以解锁大部分灰色歌曲,但是有些歌曲会被替换成诡异的版本(翻唱版),如果能支持音乐云盘的歌曲播放,优先请求音乐云盘的歌曲那就基本可以解决这个问题了,不知道能不能实现,我看NeteaseCloudMusicApi是支持云盘的

用户登录cookie与VIP歌曲的播放

第一个问题是现在登录后cookie并不会随请求发送,表现为用户私密歌单无法显示。应该是axios的问题,我用了这里的方式解决。

第二个问题是VIP歌曲无法播放。简单看了下代码,现在VIP歌曲是一律标灰的,或许可以根据用户状态来判断?

我比较暴力直接修改了上面那个判断,但是所有VIP歌曲仍无法播放,是与这里有关。我看了api文档,获取播放链接有两种方式,我把上面代码比较粗糙地修改成VIP用另一种就可以了:

if (track.fee === 1) {
  getMP3(track.id)
  .then((data) => {
    commit(
      "replaceMP3",
      data.data[0].url
    );
  });
} else {
  commit(
    "replaceMP3",
    `https://music.163.com/song/media/outer/url?id=${track.id}`
  ); 
}

我自己本身是VIP用户前端也不太熟悉,所以上面两处就直接修改了没做其它处理,期待后面更加完善的播放器。

关于登录的问题

当使用邮箱登录模式时用手机号也能登录,但是不会跳转界面。建议在两种模式登录时验证邮箱和手机的合法性,最后说下界面是我喜欢的风格,非常nice。

发现一个小Bug

在歌单播放播放的时候 如果下一首是灰色的歌曲,那么不会自动跳过,然后好像点击下一首的按钮还会记住本个的位置,再按一次上一首,又是这首。可以改改,自动跳过灰色歌曲变成下一首

关于声音设置的BUG

在使用过程中,发现了一个声音调节的BUG。
右下角设置好声音之后(假设调为5%),F5刷新网页后重新播放,会造成声音设置失效(重新变成100%),需要重新设置(但是前端UI显示还是5%)
甚至是静音了(声音调为0%),刷新之后,实际播放效果却变成100%。但是前端UI仍为静音状态。
(图片较大请耐心等待。)
image.png

不算bug的bug?

今天想起来看了下这个项目,发现已经做好Electron 版本了。于是下载了win版来试试看。

不小心点了右上角关闭界面,以为关闭界面就是直接退出软件,就在开始菜单又点击了一下,出现了以下的报错,还以为怎么刚装上就用不了了,后面发现原来是最小化到系统托盘了。但是不像其他软件一样,当前存在一个实例正在运行,再点击桌面图标或开始菜单图标时直接打开已运行实例,而是重新打开一个实例,然后就提示端口已被监听的错误。

虽说好像不是啥大bug,不过有时感觉有点膈应
f69b5ee93e3e65a1d26687d44a9e0f3
3505fae082119a99f12043e1cdc9671

使用域名部署时无法登录

比较诡异。

前期用 IP 测试正常,于是使用 Caddy 反代至域名访问。
API 保持 IP 访问,抓包显示 API 是正常请求了的。

但是每次只要点击登陆,等待几秒时间API返回信息后,就会跳回原有的登录方式选择页……

关于错误记录

我看 vue-analytics 有集成错误记录,是否考虑开放出来,可以发现一些潜在的问题,或者考虑引入 sentry。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.