First, format the lyrics

The lyrics of the song returned by the interface are in the form of a string, and relevant information needs to be extracted after formatting for rolling lyrics.

Example lyrics:

[00:00.000] Yu Zhen \n[00:01.000] Song Composition: Tan Xuan \n[00:27.129] Born I will be useful \nCopy the code

Example of formatted data:

[{time: 0.000, text: 'lyrics: in the positive'}, {time: 1.000, text: 'composition: Tan Xuan}, {time: 27.129, text:' only endowed me with talents for eventual use '},]Copy the code

Functions used for formatting:

/** * format time the value is a timeString, in seconds * @param timeString timeString in mm:ss:ss format, for example:  00:01:404 * @returns */ export const formatTimeToNumber = (timeString: string) => { let time = 0; if (timeString) { const splitArr = timeString.split(":").map((item) => Number(item)); return splitArr[0] * 60 + splitArr[1]; } return time; }; /** * export const formatLyric = (lyric: string) => { const lyricParts = lyric.split("\n").filter((item) => item); return lyricParts.map((item) => { const splitItems = item.split("]"); const lyricItem: ILyric = { time: formatTimeToNumber(splitItems[0].slice(1)), text: splitItems[1], }; return lyricItem; }); };Copy the code
Two, lyrics rolling

To realize lyrics scrolling, it is necessary to know the real-time time of the current song, and then compare the real-time time with the time field of the lyrics in the lyrics array to obtain the lyrics of the current song, and then calculate the rolling distance according to the lyrics.

Get the current playing time of the song, which needs to be processed in the player component and stored in the state management for global use. I used VUex. The code is as follows:

Ele.ontimeupdate = () => {_. Debounce (() => {store.com MIT ("player/setCurrentTime", ele.currentTime.toFixed(3)); }, 1000) (); };Copy the code

The status currentTime is constantly updated while the song is playing. But currentTime is not necessarily equal to the time field in the lyrics array, because currentTime is a floating-point number with 6 decimal digits, and the ontimeUpdate event is not necessarily triggered. So currentTime doesn’t exactly match the lyric times in the lyrics.

Therefore, it only needs to be compared to the level of seconds, not to the level of milliseconds. In addition, currentTime and lyric time are compared in two cases:

  1. currentTimeThe index of the lyrics is the lyrics currently playing;
  2. currentTimeThe time is less than the time of a certain lyric, and the last lyric is the current lyric;

By iterating through the index of the lyrics of the currently playing song, you can get the distance from the currently playing song to the top. The specific logic is:

  1. throughdocument.querySelectorAll(".lyric-item")Gets all lyric elements, based on each element’sclientHeightGets the height of the element;
  2. Gets the distance from the current lyric element to the top and sets the scrolling distance to the top according to the index of the currently playing lyric;
  3. At the same time, you can set the highlighting style of the lyrics according to the index of the current lyrics.
  4. At the same time, according to the height of the element can also set the current lyrics center;
Iii. Project address and code

The lyrics scrolling function is not very convenient to describe in text, so for more information, please check the source code on GitHub. Project online address: music-player.immortalboy.cn/ github Project address: github.com/callmehui/w… Github address: github.com/callmehui/w…

Note:

  1. The front-end page of the project has been deployed to Netlify, so domestic visits may be delayed. Please understand.
  2. In the song details, please click the song cover or song name of the music player at the bottom of the page of online access address to enter the song details, you can watch the scrolling song effect (the song will scroll after playing);