JavaScript开发简易音乐播放器

使用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>

最终效果如下：