How to create scrolling lyrics in html

htmlHow to make scrolling lyrics: First write the encoding format in the tag, introduce css style and jQuery; then place the player, the code is [

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

html How to make scrolling lyrics:

First we create an html file, with a random name, such as: index.html, this is simple, needless to say. Don’t rush to start writing code, we are creating a css For the file, you might as well name it musicplay.css. For js, we can directly write it into the html file for easy reading and adjustment. We will not create a new js file, but you need to prepare a jQuery file. If you don’t have it, it doesn’t matter. I will talk about the solution later. . The preparation work is over, and we start writing. First, write the encoding format in the tag, and by the way, introduce the css style and jQuery we created before. The code is as follows:

The code is as follows:

After the head content is written, we start to write the body. First we use the placement player, which is the label. The code is as follows:

Just go there-->Then write a Box, the code is as follows:

The css code of the box is as follows (see the remarks for the function):

The next step is the js script. Our design idea is (completed by the following functions):

Function 1: parseLyric() splits the lyrics. This step is mainly to display the lyrics in separate lines.

Function 2: highLight() highlights the lyrics currently placed in order to indicate where the current song is. One sentence

Function 3: audio.addEventListener() renders in real time, because it is scrolling, so it must be rendered continuously

Function 4: getLineNo() gets the number of lines at this time, if When we fast forward or rewind, the lyrics will also change according to our adjustments

Function 5: audio.addEventListener() returns to the beginning after playing. You don’t need to do this. It doesn’t make much sense. This is for After perfecting the functions and explaining these functions, I will post the code directly.

Related learning recommendations:html video tutorial

The above is the detailed content of How to create scrolling lyrics in html. For more information, please follow other related articles on the PHP Chinese website!