Web version Cool music----The lyrics location of Google plugin

Objective

Search songs through Baidu, into the cool listen to the song page, found no lyrics positioning function.

Suddenly think oneself can achieve this effect, so there is this article.

Analysis

put on my favorite song "Hello". The interface is as follows

through the analysis of HTML source, the following results are obtained

1, the most important part of the area: lyrics area, play progress area

2, lyrics area is a div [class= "w_lrc_content"] , each line of lyrics is a P tag.

3. The play Progress area is a div [class= "w_c_progress"],

The position of the current progress is determined by the width of the child element p[id= "Dq_processbar") , and the width is the maximum of one PX.

Solution Ideas

What you need to achieve: Follow the progress of the playback, scroll bar to stay in sync, and the lyrics section to highlight.

1. Get current Progress percentage = p[id= "Dq_processbar"].style.width/140

2. Get the ScrollHeight value of the lyrics area

3. Scroll the scroll bar to the specified position, as a percentage. div [class= "w_lrc_content"].scrolltop = scrollheight * percent

4. Get the lyrics collection, which is all P tags in the lyrics area.

5, according to the percentage, the current P-label color highlighting.

Specific implementation

1, Manifest.json configuration (here do not explain, specific details click here)

{    "manifest_version": 2,    "name": "Cool lyrics positioning",    "version": "1.0",     "description": "Cool lyrics positioning",    "Icons": {        "16.png",        "$": "48.png"           },       " Content_scripts ": [    {      " matches ": [" http://bd.kuwo.cn/* "],           " JS ": [" Js/kuwo.js "]    }  ]}

View Code

2, Kuwo.js code implementation  

/** scroll bar to the specified position, font highlighting*/functionSetscroll () {//get the DOM element you want    varLrc_content = Document.getelementsbyclassname (' w_lrc_content ') [0];//Lyrics Area    varProcessbar = document.getElementById (' Dq_processbar ');//Current Progress    varP_list = Lrc_content.getelementsbytagname (' P ');//the P collection in the lyrics area    //1. Get Current progress percentage    varcurrentprogress = ProcessBar.style.width.split (' px ') [0]/140;//2. Get the ScrollHeight value of the lyrics area    varScrollHeight =Lrc_content.scrollheight; //3. Scroll the scroll bar to the specified position, as a percentage. div [class= "w_lrc_content"].scrolltop = scrollheight * percentLrc_content.scrolltop = ScrollHeight *currentprogress; //4. Get the lyrics collection, which is all P tags in the lyrics area.     //5. Initialize all P tags first, then highlight the color of the current P label as a percentage.     varCURRENTP = Math.Round (P_list.length *currentprogress);  for(vari=0; i< p_list.length; i++) {P_list[i].style.color= ' #999 ';//Initialize the lyrics and revert to the default values} p_list[currentp].style.color= ' Green ';}/** Define a timer that updates the location once per second*/functionSetscroll_f5 () {setinterval (Setscroll,1000);} Setscroll_f5 ();

View Code

Postscript

after realizing the effect, the discovery is not very ideal.

Because the part of a song, it will have prelude, Chinese and English lyrics, etc., resulting in positioning is not very accurate.

There is no other good ideas, it does not toss ~ (ˇ?ˇ) ~

SOURCE Please click here

Web version Cool music----Google Plugin lyrics location