💬 preface

After learning some Vue knowledge, I always need to do some small projects to consolidate it. Most of the existing training projects are either e-commerce websites or background management systems. I wonder if I can make a more interesting one. It happens that I like listening to music when WRITING code, so I think of realizing an online music player.

Because can’t think of what nice name, temporarily call xiao Chen music 😃! It is written with Vue2 family bucket, and some UI styles refer to netease Cloud Music. Common functions are generally supported, but currently there is no mobile terminal adaptation.

Please use a PC to access the online demo (preferably using Chrome) requiring a friend to poke this GitHub source code

Passing friends please give Xiao Chen a free “⭐Star” ~

💪 netease Cloud Music NodeJS API

Thanks to the open source project NeteaseCloudMusicApi for the support!! Github address usage documentation

Note: high quality APIS are really the driving force of development!!

👉 technology stack

  • Vue
  • Vue Cli
  • Vue Router
  • Vuex
  • ElementUI
  • Axios
  • Vue Lazyload

🚩 Running a project

The back-end

# # cloning project to local git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git depend on NPM into the project folder NeteaseCloudMusicApi # installation CD Install # Start project (default 3000 port) node app.jsCopy the code

In this project

# cloning project to local git clone https://github.com/MrRainbowYoo/Music_Player.git # # into the project folder CD Music_Player installation depend on NPM install # to start the project  npm run serveCopy the code

🚀 Feature List

  • Music play/pause/next track/last track
  • Progress bar control
  • volume
  • Recommend the playlist
  • The latest music
  • Recommended MV
  • Video playback
  • Automatically switch to the next track
  • List loop
  • The playlist
  • Fuzzy search
  • Hot search list
  • Search history
  • The lyrics scroll
  • Playlist/album/artist details
  • To view comments
  • Shortcut key Operation
  • The user login
  • Collect the playlist

💻 Snapshots of some pages

Found that music

Recommend the playlist

The latest music

The latest MV

The search results

Details of the lyrics

The playlist

The MV details

Details of the singer

Other interface

Song list details Album details

📣 epilogue

The audio and video files of this project come from various website interfaces and will not modify any audio and video files.

This project is only a personal front – end training project. This site audio copyright from various websites, only provide data query services, do not provide any audio storage and selling services.

Do not use for commercial purposes, do not download pirated songs through this project, otherwise the consequences!

For normal use, please choose 😃, the official client of netease Cloud Music