Opening
The most powerful thing about HTML5 is the processing of media files, such as the use of a simple vedio tag to enable video playback. Similarly, in HTML5, there are corresponding labels for processing audio files
Online Demo
Audio tags
Implementing an audio tag is very easy, with the corresponding HTML code such as the following:
<audio id="player" src="music/我在人民广场吃炸鸡.mp3" autoplay controls></audio>
The above code does not need a line of JS script to achieve music playback. There are three frequently used attributes: The audio source file, whether to play it yourself, and whether to show the player control.
Because no matter what UI is displayed, the default style of the audio tag in Chrome is for example:
It can be seen that a major player also contains the current time of the display. Play, pause, fast forward fast rewind and other functions. These features all determine how to implement lyrics synchronization very well (perhaps introduced).
Since it is so easy to play the music, that as a front-end technology. What is the compatibility of audio tags in each browser?
Browser Compatibility
Can see that the major browser to the audio tag basic functions are supported. It's just a slight feature, but these main functions have already made a good player.
Lyrics
The general standard lyric file is made [时间]内容
up of tag tags, for example:
In order to more accurately display each word in the lyrics of the time, there is a special form of lyrics, such as the following:
The best example of this kind of lyrics is the QRC lyrics file (e.g. QQ music player):
In order to describe the narrative simple, this article only in the simplest lyric format as a description. Explains how to separate lyrics for lyrics synchronization.
For example the following, for a song lyrics file:
The lyrics file is now processed:
1.以行为单位拆分每一句歌词
2.将没句歌词的时间tag和内容分离
3.将时间转换为分钟
The conversion process is simple and requires only a simple regular match, such as the following steps:
The separated [time, content] can be compared with the current playback time of audio, if you need to display the corresponding lyrics will highlight the row, the same time each update of the corresponding DOM node top can visually achieve scrolling effect.
Make the lyrics UI.
- 1. Define a region of realistic lyrics and add the audio control
- 2. Add a background image and create a title border
To this. Lyrics synchronization and UI drawing all done.
Online Demo
PS:CSDN's markdown style is too water to look at the other links below.
Blog synchronization
Simple book Synchronization
HTML5 to achieve lyrics synchronization