Develop a mobile terminal music WebApp based on Vue(2.5) + VUex + Vue-Router + Vue-Axios + Better-Scroll + Scss + ES6, etc. The UI refers to the android version of netease Cloud Music and flex layout for common mobile terminals.

Because of the server, some things may not be loaded when multiple people access it. If possible, there should be no problem when they access it later. I’m really sorry for such problems.

Project demo address: Mobile music WebApp, or you can scan the QR code to access:

  • It is recommended to use the mobile phone to access, the computer in Chrome debug mode eating effect is better, after the debug mode of mobile mode, if you can not scroll, refresh the page.

Source address: Vue-music-webapp, welcome star and fork oh ~

If you think I did a good job, I will have the cheek to ask a star ⭐️ ha, star is the biggest encouragement to me (old face a red)

preview

Although the image is compressed, it still has about 3MB for several loads, so please wait patiently. Feel good can go to the above address experience yo ~

Recommendations, charts, singers

Playlist details, personal center

Player, playlist

Search page

Development purposes

Through learning and developing a Vue family bucket project, I can become more skilled in using Vue family bucket, modular development, ES6 and other knowledge, and improve my technical ability.

Technology stack

The front end

  • Vue: An MVVM framework for building user interfaces
  • vue-router: a routing system for single-page applications, used inLazy Loading RoutesTechnology to achieve asynchronous load optimization performance
  • vuex: Vue centralized state management, which is convenient when multiple components share certain states
  • vue-lazyload: Realize lazy image loading, save user traffic, optimize page loading speed
  • better-scroll: Plug-in to solve the requirements of various scrolling scenes on mobile terminals, making the sliding experience on mobile terminals more smooth
  • SCSS: CSS precompiled processor
  • ES6: ECMAScript is a new generation of syntax. Modularity, deconstruction assignment, Promise, Class, and other methods are very useful

The back-end

  • Node.js: Local test server built using Express
  • vue-axios: used to request backend API music data
  • NeteaseCloudMusicApi: netease Cloud Music NodeJS version API, providing music data

Other tools

  • vue-cli: Vue scaffolding tool to quickly initialize project code
  • eslint: Code style review tool to help us standardize code writing (make sure to develop good code practices)
  • iconfont: Alibaba icon library, who uses who knows
  • fastclick: Eliminates 300ms delay for click mobile viewer

Realize the function

Player kernel, recommendation page, hot chart page, singer page, playlist details, singer details, search page, playlist, user center and so on.

Recommended page

The recommendation page is divided into three parts, namely, the banner rotation diagram, the recommended playlist, and the recommended songs. The data is obtained using the AXIos request API, and the images are lazily loaded using Vue-Lazyload.

Rotation diagram: Use better- Scroll, see Slide. The jump aspect only realizes the jump of songs and playlists, because only these two functions are implemented for the time being.

Recommended playlist, recommended Songs: Use Vuex to manage data and facilitate data interaction between components (players play songs). Because the number of plays is still in the data, so I added it in by the way.

Leaderboard page

It also obtains the data of the charts through the API, but because the API obtains the data of all the songs in the charts, it is inevitable that the loading speed is a little slow. Later we will see if we can optimize it. After all, the slow loading will affect the user experience too much, and nothing else.

Singer page

Implement the left and right linkage of the list of singers (this needs to be understood), because I have written about this blog before, so I will not write more, see my previous note mobile alphabetic index navigation.

Song List component

Used to display a list of songs, it is reused in many places, such as: playlist details page, charts details page, singer details page, search results, user center, etc.

Playlist details page

Through the ID of the playlist to get the data of the songs in the playlist, and then do some interactive experience above, such as scrolling up to display the status bar and changing the title of the status bar to the name of the playlist, you can try to know.

The next step is to reuse song list components to display songs.

List details, singer details

The playlist details are basically the same, except for a slight change in the UI (different optimizations for different content).

player

The most important component. After all, it’s a music player. It doesn’t play.

Functions: sequential play, single loop, random play, collection and so on.

Play, pause using HTML5 audio implementation.

Data, play state, play history, habits of songs and other aspects of the use of VUEX to manage, because the data is too much, the components of the direct transfer is dead, so or honestly use vuEX, data before the transfer is really very convenient.

The icon uses Iconfont alibaba icon library, and the disc rotation animation in the middle uses animation.

As for the lyrics, the lyrics data of netease is obtained and processed using the third-party library Lyric-Parser. Realize the display of lyrics, drag the progress bar lyrics synchronized scrolling, lyrics to follow the progress of the song highlight.

Use localstorage to store favorite songs and historical data.

The audio tag cannot be played automatically on mobile devices

This is not a problem on the computer side, but it is a problem that I am very concerned about. Finally, I use a very clever method to solve this problem. (Use addEventListener to listen for the touchend event, and then let audio play it once in the callback function.

The playlist

Displays and manages the current playing songs, which can be used to delete songs from the list and select songs to play.

The search function

Functions: search singer, song list, song, hot search, data throttling, pull up refresh, save search records.

Get search data from the keyword request API to show artists, playlists, and songs.

Because search can set the number of requested data, so can be used to achieve the function of the refresh on.

Through the throttling function to achieve data throttling, through the localstorage storage search data.

The user center

Data stored locally will be displayed for user convenience. More features will be added later.

TODO

  1. Optimize leaderboard loading speed
  2. Optimizing repetitive code
  3. Add song reviews
  4. Add MV and radio functions
  5. Emm, more features let me think about that

Thank you

  • Thanks to Binaryify for maintaining and updating the interface documentation NeteaseCloudMusicApi.
  • Thanks to Teacher Ustbhuangyi’s Vue practical course, I learned a lot of Vue knowledge.

The last

In the end, of course, it is shameless to ask for a star again. If you think my project is good, you can give a star to encourage it ~