jqlyric
/
jqlyric.js

/* ===================================================
 * jqlyric.js v0.1
 * shawnk@qq.com

 * 使用方法
 * var $container=$('#lyriccontainer'); //用于显示歌词的容器对象，样式自己定义
 * $container.jqlyric({
 *      lyric:'\
            [ti:存在] \
            [ar:汪峰] \
            [al:存在] \
            [by:Love] \
            [00:00.00]汪峰 - 存在 \
            [00:00.68]多少人走着却困在原地 \
            [00:07.93]多少人活着却如同死去',   // 歌词字符串，标准lrc文件格式
 *      speed:1000,                  // 歌词滚动间隔 (毫秒)
 *      getPosition:function(){      // 获取当前播放位置的函数(返回秒数), 请定义外部函数，不指定本参数则默认从调用插件开始自动播放
 *          return position;
 *      }
 * });

 * ===================================================
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */

(function($) {
    var gtime=0;
    var lyric_listener;
    $.fn.jqlyric = function(options) {
        var opts = $.extend({}, $.fn.jqlyric.defaults, options);

        return this.each(function(){
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
            var $this=$(this);

            var arrLyric=new Array();   //放存汉字的歌词
            var arrTime=new Array();    //存放时间
            var currentLine=0;          //当前活动的歌词行号

            // 开始解析歌词
            var lyric=o.lyric;
            lyric=lyric.replace(/\]\n/g,'\]\n\|\|');
            lyric=lyric.replace(/\]\s\[/g,'\]\[');
            lyric=lyric.replace(/\]\[/g,'====');
            lyric=lyric.replace(/\[/g,'\|\|\[');
            lyric=lyric.replace(/====/g,'\]\[');

            lyric=lyric.replace(/\|\|\|\|\|\|\|\|/g,'\|\|');
            lyric=lyric.replace(/\|\|\|\|\|\|/g,'\|\|');
            lyric=lyric.replace(/\|\|\|\|/g,'\|\|');


            //将歌词解析成数组
            var arrly=lyric.split('||');

            for(var i=0;i<arrly.length;i++){
                var str=arrly[i];

                var left=0; //"["的个数
                var leftAr=new Array();
                for(var k=0;k<str.length;k++){
                    if(str.charAt(k)=="["){
                        leftAr[left]=k;
                        left++;
                    }
                }

                if(left!=0){
                    for(var j=0;j<leftAr.length;j++){
                        var tag=str.charAt(leftAr[j]+1)+str.charAt(leftAr[j]+2);

                        if(tag=='ti'||tag=='ar'||tag=='by'||tag=='al'){
                            // 歌曲特征字段
                            var tmp=str.split(tag+':');
                            tmp=tmp[1].split(']');
                            var text=tmp[0];
                            tag=tag.replace(/by/g,'歌词制作:').replace(/([ti|ar|al])/g,'');
                            arrLyric.push(tag+text);
                            arrTime.push(toSeconds('00:00:00'));   //
                        }else{
                            var text=str.substring(str.lastIndexOf("]")+1);
                            if(text==''){text='&nbsp;';}
                            arrLyric.push(text);              //放歌词
                            arrTime.push(toSeconds(str.substring(leftAr[j]+1,leftAr[j]+6)));   //放时间
                        }
                    }
                }
            }

            // 所有歌词按时间顺序排列
            for(var k=0;k<arrTime.length;k++){
                for(var j=0;j<arrTime.length-k;j++){
                    if(arrTime[j]>arrTime[j+1]){
                        temp=arrTime[j];
                        arrTime[j]=arrTime[j+1];
                        arrTime[j+1]=temp;

                        temp=arrLyric[j];
                        arrLyric[j]=arrLyric[j+1];
                        arrLyric[j+1]=temp;
                    }
                }
            }

            lyric='';
            for(var i=0;i<arrLyric.length;i++){
                lyric+='<li id="line-'+i+'" >'+arrLyric[i]+'</li>';
            }

            $this.html('<div class="fixed-lyric-box" style="position:relative;height:100%;overflow:hidden"><ul class="lyric-list" style="position:absolute;clear:both;display:block">'+lyric+'</ul></div>');

            var $box=$this.find('.fixed-lyric-box');
            var $list=$this.find('ul.lyric-list');

            var height=$box.height();
            var lineHeight=$list.height()/arrLyric.length;

            $list.css({'left':'0px','top':(height-lineHeight)/2+'px'});

            clearInterval(lyric_listener);
            lyric_listener=setInterval(function(){     // 定时检查当前播放进度，作出滚动动作
                var pos=o.getPosition();
                if(arrTime[currentLine]<=pos){  // 当前显示行号时间小于歌曲进度，需要正常向前移动
                    for(var i=currentLine;i<arrLyric.length;i++){
                        if(arrTime[i+1]>pos||i+1==arrLyric.length){
                            var height=$box.height();
                            currentLine=i;

                            $list.find('li.active').removeClass('active');
                            $list.find('li#line-'+currentLine).addClass('active');

                            var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;

                            $list.animate({
                                'top':topPos+'px'
                            },400,function(){

                            });
                            break;
                        }
                    }
                }else{
                    for(var i=currentLine;i>0;i--){
                        if(arrTime[i-1]<pos||i==0){
                            var height=$box.height();
                            currentLine=i;

                            $list.find('li.active').removeClass('active');
                            $list.find('li#line-'+currentLine).addClass('active');

                            var topPos=(height-lineHeight)/2-(currentLine)*lineHeight;

                            $list.animate({
                                'top':topPos+'px'
                            },400,function(){

                            });
                            break;
                        }
                    }
                }
            },o.speed);
        });
    };

    $.fn.jqlyric.defaults={
        lyric:'[00:00.00]未找到歌词',   // 歌词字符串 (lrc格式)
        speed:500,                      // 歌词进度一首歌间隔(毫秒)
        getPosition:function(){         // 获取播放器当前播放位置
            gtime+=0.5;
            return gtime;
        }
    }

    function toSeconds(t){     //把形如：01：25的时间转化成秒；
        var m=t.substring(0,t.indexOf(":"));
        var s=t.substring(t.indexOf(":")+1);
        s=parseInt(s.replace(/\b(0+)/gi,""));
        if(isNaN(s))
            s=0;
        var totalt=parseInt(m)*60+s;
        //alert(parseInt(s.replace(/\b(0+)/gi,"")));
        if(isNaN(totalt))
            return 0;
        return totalt;
    }

})(jQuery);