Simple Cloud music

Concise third-party cloud music player 🌎 netease visit | 👨 🏻 💻 dead simple

🌼 Technologies and features

  1. The main technology stacks include PWA, Svelte, ROLLup, Svelte-stack-Router, Svelte-lazy, etc.

  2. Support netease cloud Music account login (scan code, mobile phone password or verification code, email password).

  3. Support lyrics translation and scrolling display.

  4. Support private FM, daily recommendation, heartbeat mode, etc.

  5. Support to view song reviews, filtering comments advertising and official hard plug reviews, the fourth floor is finally no longer advertising!

  6. Daily automatic check-in (send to Android terminal check-in, because the highest points).

  7. PWA mode is recommended. Install it in Chrome and Edge as prompted, and manually install it in Safari.

  8. Player maximization supports sliding minimization, minimization mode supports left slide to switch to the next song, sliding support speed judgment.

  9. More features in development.

  10. Front-end rookie one, the level is limited, look forward to the big guy to put forward suggestions for improvement.

How to eat 🍽️

  1. This application uses PWA technology, and is essentially a web application, but an improvement over a pure web experience. Add the icon to the desktop of the device. This icon is equivalent to placing a web bookmark on the desktop, facilitating quick opening and occupying no storage space on the device.

  2. For Android devices, you are advised to use a newer version of Chrome or Edge browser to directly open simple cloud music and install it on the desktop as prompted. Domestic mobile phone browser and other third-party browsers due to the chromium kernel magic change and castration, PWA support is a long story. In normal cases, go to the page and install it on the desktop as prompted, or manually add it according to the following figure. By default, many mobile operating systems turn off the permission for your APP to place web tabs on your desktop. To enable the permission, go to Settings — APP Settings — APP Management — Find Chrome or Edge — Permissions — Add desktop shortcuts. Please use your own mobile phone system. Note: Either Microsoft and Google don’t list them or they are restricted by domestic app stores for commercial purposes. Major app stores are either unable to download them, or the versions they download are many years old. Find your own way to install a newer version of Chrome or Edge, or download it at the address I provided. Download Edge APK, download Chrome APK.

  3. For iOS devices, it’s easy to install. Use Safari to open simple cloud Music and follow the instructions below to install it on your desktop.

💭 Project Background

Want to find a program try Svelte, compares several music class applications, have just open source netease cloud API Binaryify/NeteaseCloudMusicApi available, to get the project.

Content resources use netease cloud Music, and the UI interface references Apple Music and YesPlayMusic.

Write some of the music APP you used to feel the comparison.

1. Apple Music

advantages

  • No advertising, simple interface.

  • Sound quality is not false standard, membership strategy is easy to understand no routine.

  • The number of resources is relatively rich, and the content is more diversified.

disadvantages

  • Mac end I do not know why the loading super slow, the server is not moved to the cloud guizhou? Not as a real son.

  • Maybe it’s the lack of time spent using it, the lack of data to back it up, and the recommendation mechanism is as retarded as Siri.

  • According to my personal habits, I like a song, but generally don’t like the entire album of that song and all the songs of the artist. So Apple Music’s Music category, with its emphasis on albums and artists, feels strange.

  • Maybe my taste is too low or mainly aimed at the European and American market, the official sorted song list and classification taste is not right.

2. Netease Cloud Music

advantages

  • The recommendation mechanics and algorithms are awesome, and they’re on a par with Spotify.

  • The playlist mechanism is really powerful, and I think netease Cloud should thank these selfless netizens.

  • It’s funny in the comments section. You don’t care if it’s true, it’s funny.

  • Minority music, light music, independent musicians and other modules do better.

disadvantages

  • Copyright resources relative to other companies are less, the songs become a lot of gray.

  • A hodgepodge of features and ads.

  • The early version of netease Cloud Music is top-notch in terms of UI design and user experience, even including Apple Music. Note that in the previous version, now there are all kinds of AD placement, all kinds of features are jammed, all kinds of strange Settings, for example, the default song reviews are based on recommendations instead of likes, I think by the list of recommendations can be included in the private work.

  • Ugly eating appearance, false standard sound quality, member routines.

3. QQ music

advantages

  • QQ music, cool dog, cool I as the representative of Tencent music group, complete resources, complete to the domestic monopoly, monopoly to regulatory authorities a few interviews, interviews can still be perfunctory, nothing.

disadvantages

  • The interface was too messy, too flashy, too cluttered. Out of a concise version, but the first user when leek habits. According to normal business logic, make bigger and stronger will profit will entrap private work; Not together? That’s easy. The machete department swings a machete, and the project is dead. Don’t put too much faith in these big factory nonsense, quarks is the best example.

  • Members have not bought, listen to everyone’s view is also routine full.

4. Spotify

advantages

  • Complete resources, even Chinese music resources are very complete, Apple should learn.

  • The client experience on all platforms is awesome, especially Spotify Connect, which is pretty good for a third-party developer.

  • Recommendation mechanisms and algorithms are strong.

disadvantages

  • The price of membership on official channels is a bit steep compared to other platforms, but upon reflection, this should be consumers’ own problem.

  • In mainland China normal network access, but the official did not give a simplified Chinese version (maybe I am stupid, do not know how to do).

🤷♂️ Known problems or poor experience points

  1. When the player is maximized, Android cannot prevent the system from returning, and iOS cannot prevent Safari from returning by right swiping. This operation will return to the previous page and the player can only be minimized. There is a point that does not meet the operation expectation, and there is no solution for now.

  2. Because Safari does not support CSS The scrollSmoothTo method was manually written to allow the lyrics to scroll smoothly, but it seems that Safari’s inherent scroll delay conflicts with the custom scroll time calculation. If you scroll the lyrics manually within a very short period of time, the lyrics will roll back. This requirement is not important to consider and will not be addressed for the time being (Android native support for Smooth, good experience).

  3. This application is always a Web application and there is no secondary confirmation that the application is about to exit when the first-level page returns.

  4. At present, it seems that the browser does not provide a complete system-level media control API, so it can not use the background mode such as wire headset to switch to the next song.

  5. The official lyrics format is chaotic, the special cases that have been found are dealt with one by one, there may be other inexplicable confusion, check the lyrics may lead to application error or lyrics display error.

  6. PWA mode has been set to be used only in portrait mode, but the page height calculated when the mobile phone opens the application in landscape mode is landscape height. There is a certain probability that there will be a problem when the player is maximized or minimized. Please close the browser process (note that it is the browser process) and restart the application in portrait mode.

  7. Although lazy loading is done in many places, some cases are not suitable for lazy loading. When the song list is extremely long, due to the large amount of data rendered on the page in a short period of time, depending on the phone’s performance, there may be delays.

  8. On iOS devices, swipe right to go back to the previous page is a built-in function of Safari. However, if you swipe right to go back to the previous page in PWA mode, the page will automatically load, which is not good but does not affect the function.

  9. Can’t play music in background in iOS Safari in PWA mode? I have no problem in the Mac Simulator. I can’t play. Cook does a remote trick? Next iPhone.

  10. When you use it on Android, the following notification will be displayed in the notification bar. This is the notification provided by the browser. It seems that the API is not closed. You can turn off your browser’s notification permissions, but the corresponding notification bar controls will also be turned off.

⚙ ️ deployment

If you have your own server, it is recommended to deploy this application and netease Cloud API on your own server to reduce the pressure on my server.

  1. Deployment of netease cloud API, details see Binaryify/NeteaseCloudMusicApi.

  2. Git clone https://github.com/dufu1991/simple-cloud-music.git clone the warehouse code execution.

  3. After the Node environment is installed on the device, go to the project directory and install node I dependencies.

  4. Change SRC /utils/request.js file baseURL to your netease cloud API address, run NPM run dev to start local synch, this time access the file under public.

  5. Execute NPM run build to compile and package the files into an HTML directory, then upload the files in the HTML folder to your Web server for access.

  6. If you want to deploy the project directly, run NPM run deploy and enter the server address, account, password, and static file deployment path as prompted to deploy the packaged project to the Web server.

  7. To implement PWA Service Workers (offline access), HTTPS certificate is required. Please read about domain name, certificate, server and other related information.

📜 Open Source License

This project is for personal study and research only. Commercial and illegal use is prohibited.

Open source under the MIT license.

🌊 source of inspiration with great thanks

Thank you very much for the API source code, from Binaryify/NeteaseCloudMusicApi.

  • Apple Music

  • Spotify

  • Netease Cloud Music

  • YesPlayMusic

📷 Screenshot

🎨 Design

🪢 gossip

  • Because the UI has many image areas, dark mode is not considered for the time being.
  • Oh, if you want to buy me a cup of coffee or sponsor a server, that’s fine.

🚑 Feedback and suggestions

Since it is mainly tested on Android devices and only uses my personal netease cloud Music account data, it cannot avoid the bugs caused by different versions of data on different devices. I hope you can give me positive feedback.