Example of using native JS to enable synchronous playback of the lyrics of the webpage mobile music player: js music player

Example of using native JS to enable synchronous playback of the lyrics of the webpage mobile music player: js music player

I 've written a few times before, and I 've lost every four times. Today, I spent half a day taking a look at my ideas and sorting out my clues.

// Obtain the text var txt = document. getElementById ("lrc"); var lrc = txt. value; // obtain the value in the text field/* console. log (lrc); */var lrcArr = lrc. split ("["); // remove [/* console. log (lrcArr); */var html = ""; // defines an empty variable to save the text for (var I = 0; I <lrcArr. length; I ++) {var arr = lrcArr [I]. split ("]");/* console. log (arr [1]); */var allTime = arr [0]. split (". "); var time = allTime [0]. split (":"); // get the minute second to convert the time to the second var timer = time [0] * 60 + tim E [1] * 1; var text = arr [1]; if (text) {html + = "<p id =" + timer + ">" + text + "</p>"} con. innerHTML = html <pre class = "html" name = "code" >}</pre> <div> </div> <div> implement lyrics the first thing to do is to get the text box and then combine it with the new properties in H5! </Div> <pre class = "html" name = "code"> // listen to the music broadcasting progress to synchronize the lyrics to myMusic. addEventListener ("timeupdate", function () {// obtain the current playback time var curTime = parseInt (this. currentTime); if (document. getElementById (curTime) {for (var I = 0; I <oP. length; I ++) {oP[ I ].style.css Text = "color: # ccc; font-size: 12px;" ;}document.getelementbyid(curtime=.style.css Text = "color: rgb (242,110,111); font-size: 18px; "; if (oP [num + 7]. id = curTime) // num ++ {con. style. top =-20 * num + "px"; num ++ ;}}); </pre> </div> <pre> </pre>

The above example of using native JS to implement synchronous playback of the lyrics of the webpage mobile music player is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support the help house.