preface

There are already many vUE written music players on the web. But Ben fat or want to step on their own pit, after all, their own pit after the impression will be the deepest. This is mainly because this fat more than 1 year is doing mall shopping type website, no experience in music video, so it is very want to step on the pit ha.

Project summary

1. The lyric synchronization interface returns a string with a time point before each lyric. The string is converted into an array, and the time before each lyric is converted into a time format in seconds. Note that when rendering lyrics, only one array can be rendered (i.e. lyric time array and lyric index are the same). Then all you need to do is control the WebkitTransform of the lyric container, preferably with the first line of the lyric in the middle of the container when initialized, and then move it up. 2. Background music playback: At the beginning, I could only play music in the playback component. Later, I put the audio label into app. vue and put some variables controlling it into vuex to realize background music playback. 3. For the same song, for example, click play Fireworks easy cold when playing fireworks Easy cold, audio will not automatically start from the beginning, but continue to play. This causes a bug where if there is only one song in the history, you click on the next one and the playback component doesn’t respond. The solution is to manually reset the SRC property of audio

Technology stack

vue2 + vue-cli + vuex + vue-router + webpack + ES6/7

Description of data interface

The interfaces used in this project are all coming from here.

Project running

Operation interface to git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git CD NeteaseCloudMusicApi NPM install node app. Js Run the project git clone https://github.com/lvpangpang/cloud-music.git cloud - music CD NPM install NPM run devCopy the code