HTML5 to achieve lyrics synchronization

Source: Internet
Author: User

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

    • 3. Add lyrics

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.