HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就能够实现视频播放。相似地,在HTML5中也有相应的处理音频文件的标签，那就是audio标签
在线Demo
audio标签实现一个audio标签非常easy，相应的html代码例如以下：
audio src="music/我在人民广场吃炸鸡.mp3" autoplay controls /audio
上述代码不须要一行js脚本就能实现音乐播放。当中有三个经常使用的属性，分别为：音频源文件，是否自己主动播放以及是否显示播放器控件。
因为没有不论什么ui的展现，audio标签在chrome的默认风格例如以下图:
能够看出，一个主要的播放器还包含了显示当前时间。播放，暂停，快进快退等功能。这些功能都决定了怎样非常好的实现歌词同步（兴许介绍）。
既然这么easy就就能播放音乐，那作为一项前端的技术。audio标签在各个浏览器中的兼容性又是怎样的呢？
Browser Compatibility
能够看出，各大浏览器对audio标签基本功能都支持。仅仅是在细微的特性上表现不一，可是这些主要的功能已经足已做出一个好的播放器。
为了描写叙述简单，本文仅以最简单的lyric格式作为说明。解说怎样分离歌词进行歌词同步。
例如以下，为一首歌曲的歌词文件:
分离出来的[时间,内容]能够与audio当前的播放时间进行对照，若须要显示相应的歌词则将该行高亮，同一时候每次更新相应DOM节点的top则可在视觉上达到滚动效果。
制作歌词ui。