You deserve this high-value open source third-party NetEase cloud music player

Introduction

My main music listening software is NetEase Cloud Music, but it has a lot of fancy functions, such as radio, live broadcast, friends, podcasts, Yuncun, etc. To be honest, I don’t need any of these, and I basically don’t use them. Most of them I only regard it as a local player, because it is a commercial software after all, and it needs to make money, so I can understand, relatively speaking, the client on the computer will be simpler, the web version is the purest, but the appearance is average (Everyone may have different aesthetics, here is just a personal opinion~).

So is there a NetEase cloud music player that is simple, pure and beautiful? The answer is yes, it is: YesPlayMusic, an open source third-party implementation.

Project address: https://github.com/qier222/YesPlayMusic .

This project currently has 18.1k stars, which is quite a lot. The project is developed based on the Vue.js family bucket. It is a web project, but it is packaged as a client for macOS, Windows, and Linux through Electron .

Of course, the foundation of this project is another open source project: https://github.com/Binaryify/NeteaseCloudMusicApi , as the name suggests, is the api of Netease Cloud Music, which is also a third-party project that supports all official interfaces, developed with nodejs, based on Express framework, the request library uses axios , the principle is cross-site request forgery (CSRF), by forging request headers, calling the official API, in short, because our website domain name is different from the domain name of Netease Cloud Music, if you directly Requesting the official interface of NetEase Cloud Music, the NetEase Cloud Music server and browser do not allow us to do this for security, so we need a middleman that will not be restricted, that is, the back-end service, and then our website requests this service. interface, bring the certified cookie , this service uses cookie , and also forge some request headers, the purpose is to make Netease Cloud Music official server think it is a browser, so that it will You can help us adjust the official interface of NetEase Cloud Music, and then set this service to allow cross-domain requests, then our website can obtain the official data of NetEase Cloud Music by requesting this middleman.

Features & Interface

Let's take a look at its basic functions and interface first.

Log in

It supports scanning code, email login and mobile phone number login, but does not support verification code login and third-party login, but it is enough.

If you don't want to log in, you can directly search for your username, and you can also listen to your playlist, but you can't see some private data:

front page

The columns on the home page are: by Apple Music, Recommended Playlist, For You (daily recommendation), Recommended Artists, New Express, and Charts.

by Apple Music is a data-written column:

For You is a daily recommendation, and you need to log in to use it.

discovery page

You can click View All to jump to the discovery page in some columns on the homepage. Of course, you can also directly click the tab at the top to switch to the discovery page. The discovery page is mainly for viewing recommended playlists, rankings, and searching for playlists by category:

music library

The music library needs to be used after logging in, which is your personal space. You can view your favorite songs, favorite playlists, albums, artists, MVs, cloud disks and listening song rankings:

search

Search results include: Artists, Albums, Songs, Videos, and Playlists:

Playlist Details

Click on a playlist or album to jump to the playlist details page. On the details page, you can view the introduction, all songs in the playlist, and of course you can play them:

play

Finally, there is the playback function. A playback bar will be displayed at the bottom to display the currently playing song. You can also perform playback control and cut songs:

Click on the bottom bar to open a full-screen playback interface, and you can see the lyrics:

Comment function

It has become a habit to listen to songs and read comments. Comments were originally a feature of NetEase Cloud Music, but unfortunately this project does not support the function of viewing comments, and the author also clearly stated that it will not support:

Because it is open source, the author does not support it, so I can support it myself, so I forked its repository, and spent a day adding the functions of viewing, posting, replying, and liking comments.

The entry is in the bottom play bar:

After clicking, it will swipe the full screen to display the list of comments:

It supports sorting in two dimensions of popularity and time, and also supports viewing floor replies. You can comment on songs or click on a floor to reply. However, there is a small problem. The published comments or like data will not appear immediately, you need to Wait for a while (two minutes) to refresh the list before it is displayed, because the api service adds cache processing:

In order not to be blocked by the official server, I did not remove or modify the cache time.

use

If you see this and you are already excited, then you can start using it. First of all, if you don’t want to toss, you can use it directly online. You can directly access the default online address provided by this project without commenting: https://music.qier222 .com/ . If you need the comment function, you can use the address I modified and deployed: https://music.lxqnsys.com/ .

Of course, at the same time, I also packaged the client installation package. If you like to use it through the client, you can download it here https://github.com/wanglin2/YesPlayMusic .

The project itself supports a variety of deployment methods, deploying to Vercel (Vercel is a zero-configuration static resource and serverless deployment platform), deploying to your own server, Docker deployment, etc. Only the first one is introduced here. , because it is not only free and simple, but also can generate your own address, so you don't have to worry about the failure of using someone else's address. The fool-proof tutorial is as follows:

1. If you don't have a GitHub account, register one first.

2. Open the Vercel website and log in with the github account:

3. Deploy NetEase Cloud API

Open the NeteaseCloudMusicApi project repository and click the [Fork] button in the upper right corner:

This will copy the project to your name:

Then open the Vercel website and click the [New Project] button in the upper right corner to create a new project:

Then find your fork's NeteaseCloudMusicApi project in the project list on the left. There are too many projects and you can search directly:

Click the [Import] button to import, and then the configuration can also be deployed without changing, directly click the [Deply] button to deploy:

After the deployment is complete, click the preview area on the left to open the project, and copy the address of the newly opened page:

4. Deploy the YesPlayMusic project

After the interface service is deployed, the YesPlayMusic project can be deployed next. The steps are the same as the deployment interface, but after the fork, you need:

Click [Add File] of the warehouse, select [Create new file], enter [vercel.json], copy and paste the following content into the file, and replace https://your-netease-api.example.com with yours The address of the just-deployed NetEase Cloud API:

 {
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}

Next, open Vercel , the steps are the same as before, the difference is that the last step needs to modify a little configuration:

Click [Environment Variables], fill in Name as VUE_APP_NETEASE_API_URL , Value as /api , and click [Add]. Finally, click [Deploy] to deploy to Vercel .

The default generated domain name is a subdomain of Vercel https://xxx.vercel.app . If you have your own domain name, you can also bind it to your own. Click the [Setting] button on the project details page:

Then click the [Domains] button on the left, enter the domain name you want to bind on the right, and click [Add]:

Next, just go to the service provider where you purchased the domain name and configure it CNAME mapping:

Go back to Vercel page, it will automatically detect whether the mapping is successful, and finally wait for the certificate generation to complete, and then you can access it through our own domain name:

This article ends here~