使用h5开发的歌词联动音乐播放器，html部分代码如下：

<div id="box">
    <img src="images/1.gif" width="248" height="280" alt="联动图片" />
        <div class="lrcbox">
        <ul id = "lrcList"></ul>
        </div>
</div>
<audio id ="audio" src="mp3/2.mp3" controls="controls" autoplay loop>
    Your browser does not support the audio tag.
</audio>
    <!--E music-->
    <!--解析歌词:
 a.把时间绑定给对应的歌词作为id; 
 b.获取歌词，并做响应的特效 -->
    <textarea id="lrcnt" style="display:none;">
    [00:02.00]求佛
    [00:04.40]词曲：陈超 
    [00:06.48]演唱：誓言
    [00:08.48]
    [00:35.50]当月光洒在我的脸上
    [00:39.36]我想我就快变了模样
    [00:44.25]有一种叫做撕心裂肺的汤
    [00:48.16]喝了它有神奇的力量
    [00:51.30]
    [00:52.93]闭上眼   看见天堂
    [00:56.02]那是藏着你笑的地方
    [01:00.96]我躲开无数个猎人的枪
    [01:04.78]赶走坟墓爬出的忧伤
    [01:08.00]
    [01:08.56]为了你  我变成狼人模样
    [01:12.67]为了你  染上了疯狂
    [01:16.73]为了你  穿上厚厚的伪装
    [01:20.99]为了你  换了心肠
    [01:24.02]
    [01:26.11]我们还能不能再见面
    [01:29.10]我在佛前苦苦求了几千年
    [01:33.26]愿意用几世换我们一世情缘
    [01:37.45]希望可以感动上天
    [01:41.08]
    [01:41.68]我们还能不能能不能再见面
    [01:45.79]我在佛前苦苦求了几千年
    [01:49.96]当我在踏过这条奈何桥之前
    [01:54.13]让我再吻一吻你的脸
    [01:58.05]
    [02:33.20]闭上眼   看见天堂
    [02:36.16]那是藏着你笑的地方
    [02:41.22]我躲开无数个猎人的枪
    [02:44.97]赶走坟墓爬出的忧伤
    [02:48.08]
    [02:48.68]为了你  我变成狼人模样
    [02:52.82]为了你  染上了疯狂
    [02:57.04]为了你  穿上厚厚的伪装
    [03:01.23]为了你  换了心肠
    [03:04.10]
    [03:06.03]我们还能不能再见面
    [03:09.24]我在佛前苦苦求了几千年
    [03:13.38]愿意用几世换我们一世情缘
    [03:17.64]希望可以感动上天
    [03:21.23]
    [03:21.83]我们还能不能能不能再见面
    [03:25.90]我在佛前苦苦求了几千年
    [03:30.12]当我在踏过这条奈何桥之前
    [03:34.38]让我再吻一吻你的脸
    [03:39.11]
    [03:39.71]我们还能不能再见面
    [03:42.68]我在佛前苦苦求了几千年
    [03:46.80]愿意用几世换我们一世情缘
    [03:51.00]希望可以感动上天
    [03:55.28]我们还能不能能不能再见面
    [03:59.29]我在佛前苦苦求了几千年
    [04:03.63]当我在踏过这条奈何桥之前
    [04:07.59]让我再吻一吻你的脸
    [04:12.02]让我再吻一吻你的脸
    [04:16.11]让我再吻一吻你的脸
    [04:21.92]
    </textarea>

css样式部分代码如下：

<style type="text/css">
 *{margin:0; padding: 0;}
 body{font-family: "微软雅黑";font-size: 14px;background:url('images/bg.jpg') no-repeat top center;background-size: cover;}
 ul,li{list-style: none;}
 #box{width: 630px;overflow:hidden;border: 2px solid #99CC99; margin:120px auto;border-radius: 10px;box-shadow:0 0 40px #99CC99; }
 #box img{float:left;}
 #box .lrcbox{width: 368px;height:280px;padding-left:10px;overflow:hidden;border-left:2px solid #99CC99;float:left;}
 #box .lrcbox li{width:240px;padding:8px;color:#fff; }
 #box .lrcbox li.hover{color:#993399; font-size: 20px;}
 #lrcList{transition: all 0.3s ease;}
 #audio{margin:-100px 0 100px 365px;}
</style>

JS代码：

<script type="text/javascript">
 function $(id){
 return document.getElementById(id);
 }
 var audioDom = $("audio");
 window.onload = function(){
 lrc.init($("lrcnt").value);
 //监控当前音乐，获取到对应的时间与歌词进行匹配
 audioDom.ontimeupdate = function(){
 var t = parseInt(this.currentTime);
 lrc.jump(t);
 }
 };

 //定义对象
 var lrc = {
 //定义正则表达式用于表示歌词左右的空格
 regex_trim:/^\s+|\s+$/,
 init:function(lrctxts){
 //把歌词分割成数组,以分号隔开,时间和歌词是一起的
 var txts = lrctxts.split("\n");
 var html = "";
 for(var i=0; i<txts.length;i++){
 //剔除左右的空格
 var item = txts[i].replace(this.regex_trim,"");
 //将歌词和时间分割
 var ms = item.split("]");
 var mt = ms[0].replace("[","").split(":");
 //alert(mt);
 //将时间转换成秒为单位并赋给对应的歌词作为它的id
 var m = parseInt(mt[0]*60+mt[1]*1);
 console.log(m);
 var txt = ms[1];
 console.log(txt);

 //歌词不为空的时候进行拼接
 if(txt!=""){
 html+="<li id='t_"+m+"'>"+txt+"</li>";
 }
 }
 $("lrcList").innerHTML += html;
 },

 //歌词移动
 jump:function(duration){
 //获取时间对应的具体的歌词
 var dom = $("t_"+duration);

 //获取ul对象
 var lrcbox = $("lrcList");

 if(dom){
 //定义用于存放兄弟元素的数组
 var arr = this.siblings(dom);
 //遍历每一个兄弟元素并去掉其hover样式
 for(var i = 0;i<arr.length;i++){
 arr[i].className = "";
 }
 //给对应的对象（当前播放歌词）添加样式
 dom.className = "hover";
 var index = this.indexof(dom)-3;
 lrcbox.style.marginTop = (index < 0?0:index)*-35+"px";
 }
 },
 //获取具体的对象(当前播放的歌词)
 indexof:function(dom){
 //获取ul下面的所有li
 var listDoms = dom.parentElement.children;
 //遍历获取到歌曲播放的当前歌词并返回
 for(var i=0; i<listDoms.length; i++){
 if(listDoms[i] == dom){
 index = i;
 break;
 }
 }
 return index;
 },
 //当前未播放的歌词对象
 siblings:function(dom){
 var listDoms = dom.parentElement.children;
 var arr =[];
 //判断获取到的是否为兄弟元素(已经播放过去的歌词)
 for(var i = 0; i < listDoms.length;i++){
 if(listDoms[i]!= dom){
 arr.push(listDoms[i]);
 }
 }
 return arr;
 },
 };
</script>

最终效果如下：