The implementation of Lyrics data parsing, lyrics scrolling, and lyrics progress control (based on Js-base64, Lyric-parser, Better-scroll), with Vue project as an example

Lyrics data parsing, lyrics scrolling, lyrics progress control (based on Js-base64, Lyric-parser, Better-scroll)

1. Demand Analysis

The background Lyrics interface returns the following data (Base64 string):

w3rpoua8lowrmf0kw2fyouiwm+s5i+IWPL0KW2FSOUE7HEWJQ10KW2J5OL0KW29MZNNLDD OWXQPBMDA6MDAUNTZD5RYU5ZGYIC0G6JAB5LML6LCMCLSWMDOWMI40ML3OR43VVJROLPVK UYVOSKYKWZAWOJAZLJK5XEABSU+8muiwm+s5i+iwpgpbmda6mduumzhd57yw5puy77ya6y OR5LYFL+w8oowunewuhwpbmda6mdcundvd5yi25l2c5lq677ya6lw16iux5l+Kclswmdow Os4wov3lkijlo7dvvjrotbxoi7hkv4okwzawojewljq4xew9lemfs+w4io+8mueoi+azk+a1twpbmda6mteunzrdclswmdoxmi4znf3mt7fpn7pluijvvjrpso3pljakwzawojezljg4x Eavjew4puwkhoeqhuw3peeoi+w4io+8mumyjemukapbmda6mtyumtbdclswmdoyms4ynv3n rodljzxngrkkwzawojiyljixxqpbmda6mjuumtzd6k+06k+d55qe5pa55byp566a5y2v54k 5clswmdoyoc4yn10kwzawojmwljiyxemakui/m+eahoadhee7quivt+ecgeevpqpbmda6mz muntdd5l2g5y+I5LIN5PIV5LIQ5RYU5ZGYCLSWMDOZNI4YN13LIKVORR7ORQHPGQPKUPVMG 4XOIOIKWZAWOJM5LJA4XQPBMDA6NDIUMJBD5RKH5OSP6KEBCLSWMDO0MY43NF0KWZAWOJQ2 lje3xeaikewpquads+eci+eci+s9ooaajus5iowchgpbmda6ndkundddclswmdo1ms43nf3 KVADPMR7OV4FNMOTLPKROOAJPNAIKWZAWOJU0LJYWXEWDJ+ayoewkqei1i+Eahoa8lowrma pbmda6ntcumjfd6kec5lyx5lia55y86io955yl6kebclswmdo1os42of0kwzaxojayljq2x  Eivpemfjewqios9ooa8lowhuueahoaikea8loinhuiajos4jeingqpbmde6mdcumdjdclsw  Mtowny41nl3lnkjpglzkuidkukrmnidnilhkvadnmotkurrljbplhbtooajmvjqkwzaxoje Ylje5xqpbmde6mtiuodzd5lua5lmi5pe25ycz5oir5lus5bya5ael5ps26lw35lqg5bqv57

Parse into lyrics and apply, realize the lyrics with the progress of scrolling, display the current lyrics, you can control the progress of the lyrics (that is, change the progress of the song, the lyrics will be adjusted accordingly) (Figure 1)

2. Solutions

Libraries used: Js-base64, Lyric-parser, Better-scroll, and related APIs are recommended to get to GitHub first.

Add these two libraries in dependencies, and then npm install them and you need to introduce them when you use them.

After installing the Dependent libraries:

2.1. Use Js-base64 to parse lyrics:

The parsed lyrics information becomes a recognizable string, as follows: (Figure 2)

2.2. Use Lyric-parser to parse the lyrics string so that it can be used as a data format:

At this point, the lyrics have been changed to the data format we need, as follows: (Figure 3)

2.3, the application of lyrics data to Vue project application examples:

Template

<Scrollclass= "Lyric-wrapper"ref= "Lyriclist":d ATA= "Currentlyric && currentlyric.lines">    <Div>      <Divclass= "lyric">        <Pv-for= "(Line,index) in Currentlyric.lines"ref= "Lyricline": Class= "{' Current ': Currentlinenum===index}"class= "text">{{Line.txt}}</P>      </Div>    </Div>  </Scroll> 

Explanation: Scroll for I previously wrote a component, based on Better-scroll, component details please see I wrote before the blog http://blog.csdn.net/fabulous1111/article/details/ 78848971, the component is used to implement the scrolling of the lyrics, binding a current class to the present lyrics to display the currently playing lyrics in the Cheng Gaoliang state.

Methods

With Lyric-parser and Better-scroll, the automatic scrolling related API for lyrics through Scrolltoelement is recommended to GitHub first:

getlyric () {//call the project to get the lyrics of the API, get to the use of js-base64 to turn the format after the lyrics (2)           This. Currentsong.getlyric (). then (lyric) = {            //new Lyric-parser Lyrics Object           This. Currentlyric =NewLyric (Lyric, This. Handlelyric//if the current song is playing, call the lyrics object's playback method and play the lyrics (scrolling is required to combine Better-scroll)          if( This. Playing) {               This. Currentlyric.play ()}}) }, Handlelyric ({linenum, txt}) { This. Currentlinenum =LineNum//If the current row is greater than 5, start scrolling to keep the lyrics displayed in the middle position        if(LineNum > 5) {Let Lineel= This. $refs. lyricline[linenum-5]            //combine better-scroll, scroll lyrics           This. $refs. Lyriclist.scrolltoelement (Lineel, 1000)          } Else {             This. $refs. Lyriclist.scrolltoelement (0, 0, 1000)          }        } 

3, other related operations: 3.1, the song changes when the empty operation

3.2, single cycle mode of processing:

3.3. When the song pauses/plays, the lyrics pause and play

3.4. After changing the song playback progress, the lyrics settings

The implementation of Lyrics data parsing, lyrics scrolling, and lyrics progress control (based on Js-base64, Lyric-parser, Better-scroll), with Vue project as an example