Convert Figma logo to code with AI

qier222 logoYesPlayMusic

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

28,894
4,227
28,894
569

Top Related Projects

网易云音乐 Node.js API service

一个基于 electron 的音乐软件

Salt Player for Android Release, Feedback

11,259

🎧☁️ Modern Music Server and Streamer compatible with Subsonic/Airsonic

15,856

🐦 A personal music streaming server that works.

Quick Overview

YesPlayMusic is a high-quality third-party NetEase Cloud Music player built with Vue and Electron. It offers a clean, modern interface and supports features like personalized daily recommendations, lyrics display, and desktop lyrics. The project aims to provide a better music listening experience for NetEase Cloud Music users.

Pros

  • Beautiful and intuitive user interface
  • Cross-platform support (Windows, macOS, Linux)
  • Customizable themes and appearance
  • Supports Last.fm scrobbling

Cons

  • Relies on NetEase Cloud Music's API, which may change or become unavailable
  • Limited to NetEase Cloud Music's library and features
  • May lack some advanced features found in the official client
  • Potential legal concerns due to unofficial API usage

Getting Started

To get started with YesPlayMusic:

  1. Clone the repository:

    git clone https://github.com/qier222/YesPlayMusic.git
    
  2. Install dependencies:

    cd YesPlayMusic
    npm install
    
  3. Run the development server:

    npm run serve
    
  4. Build for production:

    npm run build
    

For desktop app development:

npm run electron:serve

To build the desktop app:

npm run electron:build

Note: You'll need to have Node.js and npm installed on your system before starting.

Competitor Comparisons

网易云音乐 Node.js API service

Pros of NeteaseCloudMusicApi

  • More comprehensive API coverage for NetEase Cloud Music
  • Regularly updated with new features and bug fixes
  • Suitable for developers building various applications and services

Cons of NeteaseCloudMusicApi

  • Requires additional frontend development for a complete music player
  • May be more complex to set up and use for non-developers
  • Lacks a built-in user interface

Code Comparison

NeteaseCloudMusicApi (server-side API):

const { login_cellphone, user_playlist } = require('NeteaseCloudMusicApi')

login_cellphone({
  phone: '手机号',
  password: '密码'
}).then(result => {
  console.log(result)
  user_playlist({
    uid: result.body.account.id
  }).then(data => {
    console.log(data)
  })
})

YesPlayMusic (client-side application):

<template>
  <div class="player">
    <Cover :url="currentTrack.al.picUrl" :playing="isPlaying" />
    <div class="controls">
      <button @click="playPause">{{ isPlaying ? 'Pause' : 'Play' }}</button>
    </div>
  </div>
</template>

YesPlayMusic is a complete music player application with a user-friendly interface, while NeteaseCloudMusicApi provides a backend API for developers to build custom applications. YesPlayMusic offers a ready-to-use solution for end-users, whereas NeteaseCloudMusicApi requires additional development to create a functional music player.

一个基于 electron 的音乐软件

Pros of lx-music-desktop

  • More comprehensive music source options, including multiple platforms
  • Advanced features like lyric synchronization and audio output device selection
  • Supports both Windows and Linux operating systems

Cons of lx-music-desktop

  • Less visually appealing interface compared to YesPlayMusic's modern design
  • Potentially more complex user experience due to additional features
  • Lacks some of the social features present in YesPlayMusic

Code Comparison

YesPlayMusic (Vue.js):

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App).use(store).use(router).mount('#app');

lx-music-desktop (Electron):

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Both projects use different frameworks, with YesPlayMusic utilizing Vue.js for a web-based approach, while lx-music-desktop employs Electron for a desktop application. This fundamental difference affects their architecture and deployment methods.

Salt Player for Android Release, Feedback

Pros of SaltPlayerSource

  • Focuses on local music playback, providing a lightweight solution for users who prefer offline listening
  • Offers a clean and minimalist user interface, potentially easier for some users to navigate
  • Supports a wider range of audio formats, including lossless formats like FLAC

Cons of SaltPlayerSource

  • Lacks integration with online music streaming services, limiting access to a vast library of songs
  • Has fewer advanced features compared to YesPlayMusic, such as personalized recommendations or social sharing options
  • May have a smaller community and less frequent updates due to its more niche focus

Code Comparison

YesPlayMusic (Vue.js):

<template>
  <div class="player">
    <div class="cover-image">
      <img :src="currentTrack.album.cover" />
    </div>
    <div class="controls">
      <button @click="play">Play</button>
    </div>
  </div>
</template>

SaltPlayerSource (Kotlin):

class PlayerActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_player)
        
        playButton.setOnClickListener { playMusic() }
    }
}

This comparison highlights the different technologies and approaches used in each project, with YesPlayMusic utilizing Vue.js for web-based development and SaltPlayerSource using Kotlin for Android app development.

11,259

🎧☁️ Modern Music Server and Streamer compatible with Subsonic/Airsonic

Pros of Navidrome

  • Self-hosted solution, giving users full control over their music library and data
  • Supports a wide range of audio formats, including FLAC and OGG
  • Implements the Subsonic API, allowing compatibility with various mobile apps

Cons of Navidrome

  • Requires more technical setup and maintenance compared to YesPlayMusic
  • May have a steeper learning curve for non-technical users
  • Limited built-in social features or music discovery options

Code Comparison

Navidrome (Go):

func (s *Scanner) processMediaFiles(ctx context.Context, dir string, files []string) error {
    for _, f := range files {
        if err := s.processMediaFile(ctx, f); err != nil {
            log.Error(ctx, "Error processing file", "file", f, err)
        }
    }
    return nil
}

YesPlayMusic (Vue.js):

async function getArtist(id) {
  const { data } = await artist(id);
  return data;
}

async function getArtistAlbums(id) {
  const { albums } = await artistAlbum(id);
  return albums;
}

Summary

Navidrome is a self-hosted music server with broad format support and Subsonic API compatibility, ideal for users who want full control over their music library. YesPlayMusic, on the other hand, offers a more user-friendly interface with integrated streaming services, making it better suited for casual listeners who prefer a streamlined experience without the need for self-hosting.

15,856

🐦 A personal music streaming server that works.

Pros of koel

  • More comprehensive backend with user management and playlist features
  • Supports multiple audio sources including local files and remote URLs
  • Has a mobile-friendly web interface

Cons of koel

  • Requires more setup and configuration
  • Less focus on integration with external music services
  • May have a steeper learning curve for non-technical users

Code Comparison

koel (PHP):

public function getPlaylistById($id)
{
    return Playlist::findOrFail($id);
}

YesPlayMusic (JavaScript):

async function getPlaylistDetail(id) {
  const { playlist } = await getPlaylistDetail(id);
  return playlist;
}

Both projects handle playlist retrieval, but koel uses a more traditional ORM approach with PHP, while YesPlayMusic employs async/await in JavaScript for API calls.

Key Differences

  • koel is a self-hosted solution, while YesPlayMusic focuses on integrating with existing music services
  • koel offers more advanced features for managing a personal music library
  • YesPlayMusic has a more modern, user-friendly interface designed for casual listeners
  • koel is built with Laravel (PHP) backend, while YesPlayMusic uses Vue.js for a single-page application approach

Conclusion

Choose koel for a comprehensive self-hosted music solution with advanced library management. Opt for YesPlayMusic if you prefer a simpler setup and integration with popular music streaming services.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


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:ia32Windows 32 位
yarn electron:build --windows nsis:arm64Windows ARM
yarn electron:build --linux deb:armv7lDebian armv7l(树莓派等)
yarn electron:build --macos dir:arm64macOS ARM

:computer: 配置开发环境

本项目由 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