vue-music
Download dependencies
Start a project
Package project
Backend GitHub address
https://github.com/Binaryify/NeteaseCloudMusicApi Corresponding version during development: 4.0.23 If problems occur, choose the latest version
Preview address
Imitation NetEase Cloud music preview address
uni-app version
uni-app version warehouse
Currently completed function
- Song player: play, drag progress, volume adjustment, download, playlist, song page lyrics scrolling, comments
- Discovery page: recommendations, playlists, singers, rankings, latest music (new song express, new albums on the shelves (new albums this week))
- Login: Login with mobile phone number and password, log in with QR code, log in with verification code, log out
- Song list: Like music, album entry, singer entry, currently playing music line
- Each detail page
- Playlist details page: song list, playlist page search, loading complete playlist, collection, comments
- Album details page: song list, search, collection, comments, album details
- Singer details page: album list, singer description, MV, similar singers
- Video details page: video playback (playback using native video and controls), similar video recommendations, MV playback, MV recommendations, likes, collections, comments, and following creators
- User details page: basic information, region (only supports domestic regions), created playlists, favorited playlists, updated personal information and avatar
- Search: songs, singers, playlists, users, MVs, album searches, hot search lists, search suggestions, quick access to search results
- Comments (requires login): likes, replies, comments, comment pagination, and page number jump and reply jump input box animations
- Video (requires login): video list, MV list, all MV page, MV ranking page
- My collection (requires login): collected albums, MVs, singers and filtering functions
- Recently played (local storage, not cloud playback record)
- Private FM (requires login): play, trash, likes, comments, lyrics scrolling (the performance here is not the same as NetEase Cloud, if you want it to be consistent, you need to change a lot)
- All pages are mobile adapted
- Lazy loading of routes and code chunking, adding navigation guards when not logged in, and decoupling route props
- Use Vuex to manage login status, current song list and song status, and other multi-component status
- The sharing interface is to share to NetEase Cloud dynamics. Since the dynamic part has not been done yet, all sharing is invalid. According to NetEase Cloud, the performance of collecting all songs is to collect to a created playlist or create a new playlist. It has not been added yet.
BUG or UPDATE
- Added restrictions on loading complete songs into the playlist (during use, a playlist with 6,000 singles was encountered, and using trackIds to request the corresponding songs would cause a 431 error)
- Add limit on number of recently played songs 11/19
- Solve the bug that after adding the navigation guard, the lost login status is refreshed, and the navigation error occurs after reacquiring the login status 11/20
- Added stop song playback while video is playing
- Solve the problem that the data cannot be updated when switching singers under similar singer tabs on the singer details page
- Add js animation of lyrics scrolling
- Add routing view switching animation
- Added singer detail page Tab switching animation for loading data and prompt when it is empty
- Add @root directory and modularize the API by function to facilitate management
- We encountered a problem that the backup content of the scope named slot does not take effect after being packaged. It behaves normally in the development environment and has not yet been resolved. We can only use all the backup content instead of using the backup content.
- I have encountered a problem that exceeds the maximum safe number of JS, which has not been solved yet (the picture in the song information obtained when getting the search suggestions is NULL, but the picture ID is there, but it is inaccurate if it exceeds the safe number). You can define axios to process the data yourself. Method (axios defaults to direct JSON.parse), there are related plug-ins
- Solve the bug of clicking the user in the comment area of the song page to jump to the user route, but the playback interface does not close, and the bug that the user page does not change with the ID, delete the duplicate logic of the playback component
- The outline on the mobile terminal does not have rounded corners, so replace it with a border.
- Integrate album list, playlist list, and singer list into one component
- Freeze only rendered data to optimize performance
- Integrate video details and MV details page into one component
- Most of the subpages use the same scroll bar, monitor the routing address, reset the scroll bar, and reset the scroll bar of the song play page when changing songs.
- Fixed the bug of long numbers in comments not wrapping
- Solve the bug that the song progress is pulled forward and the lyrics activation line remains unchanged; the current time source for lyrics scrolling judgment has been changed (it was the audio real-time playback time before, and now it is the current time submitted to vuex after processing by the former, which may be slightly delayed. or in advance); extract the lyrics component (private FM needs to be reused)
- Chrome has restrictions on media tags, which require user interaction to automatically play.
- Add playlist information created by editing and use the VueCropper plug-in to crop images
- Adding personal information includes cropping and changing the avatar, without adding a region, cropping and processing the image into a blob object and encapsulating it into a component (songlist cover and personal avatar)
- Cancel using Nprogress
- The singer page cancels the use of ELTABS and uses TabMenu in the project instead; modify the get method of the encapsulated axios request and change the way of handling errors so that it can be received by async/await
- Some plug-in cdn loads are a bit slow, resulting in a long white screen when loading for the first time.
- Solve the bug of not returning to the homepage after logging out, and lazy loading of some page images
- Added lazy loading of some images, removed some unreasonable skeletons, and changed the standardization of component usage.
- And change the bugs found in the vue3 + ts version refactoring
