HTML5 achieves lyrics synchronization and html5 lyrics Synchronization

HTML5 achieves lyrics synchronization and html5 lyrics Synchronization
Opening

HTML5 is most powerful in processing media files. For example, you can use a simple vedio tag to play a video. Similarly, there is a corresponding tag for processing audio files in HTML5, that is, the audio tag.

Online Demo

Audio tag

Implementing an audio tag is very simple. The corresponding html code is as follows:

<Audio id = "player" src = "music/I am eating fried chicken in the People's Republic of China" autoplay controls> </audio>

The above code can play music without a line of js scripts. There are three common attributes: audio source file, automatic playback, and player control. Because there is no ui display, the default style of the audio tag in chrome is as follows:

It can be seen that a basic player also includes functions such as displaying the current time, playing, pausing, and fast forward and return. These functions determine how to synchronize the lyrics well (subsequent introduction ).

Since it is so easy to play music, what is the compatibility of the audio tag in various browsers as a front-end technology?
Browser Compatibility

It can be seen that all major browsers support basic functions of the audio tag, but they do not have the same performance in terms of subtle features. However, these basic functions have already made a good player.

Lyrics

Generally, standard lyric files are composed[Time] contentTags, such:

In order to display the time of each word in each lyrics more accurately, there is a special form of lyrics, as shown below:

The best example of this type of lyrics format is the QRC lyrics file (such as the QQ music player ):

To describe the lyrics in a simple way, this article uses the simplest lyric format as an example to explain how to separate the lyrics and synchronize the lyrics. As follows:

Now we will take a look at the lyrics file:

• 1. Split each lyrics by unit of action
• 2. Separate the time tag and content of no lyrics
• 3. Convert the time to minutes

The conversion process is simple and requires a simple regular expression matching. The process is as follows:

The separated [time, content] can be compared with the current audio playback time. To display the corresponding lyrics, highlight the line, at the same time, you can visually scroll through each update of the top of the corresponding DOM node.

Create the ui of the lyrics.

• 1. Define a region with realistic lyrics and add the audio control

• 2. Add a background image and create a title border

• 3. Add lyrics

At this point, the lyrics synchronization and ui painting are complete.

Online Demo

PS: The markdown style of CSDN is too watery. You can see other links below.

Blog sync

Synchronization of simplified books