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>

最终效果如下：