Lily_music 网页音乐播放器 -可搜索（附歌词联动播放效果解说）

loadLrc :function(){//加载歌词
  var vallrc = $(".hidetextlrc").text();
  //如果没有上传歌词或者删除了歌词
  if(!vallrc || $(".is_deleteLrc").text() == 1){
    $(".lrc_content_notext").text("暂无歌词");
    $(".lrc_content_notext").show();
    return;
  }
  var isHrefLrc = $(".is_href_lrc").text();
  //如果是上传的歌词，那就要拼接上服务器地址
  if(isHrefLrc == 0) vallrc = basePath + "/" + vallrc;
  $.ajax({  //异步请求获取本地歌词
    url:vallrc,
    type:"post",
    success:function(data){
      //第一次分离歌词
      var lrcArr = data.split("[");
      //存放分离后的歌词
      var html = "";
      var lrclast = null; //记录上一行的歌词
      var lrcmes = null; //记录当前行的歌词
      var bofo = -1; //记录上一行歌词的秒数
      var ms = -1; //当前这一行的秒数
      for(var i = 0;i < lrcArr.length;i++){
        //第二次分割歌词，变成["03:01.08","这个世界变得更加美丽"],数组以逗号分隔
        var arr = lrcArr[i].split("]");
        //取到数组arr下标为1的歌词部分
        //将上一行的歌词赋值给lrclast
        lrclast = lrcmes; 
        //得到当前歌词
        lrcmes = arr[1];
       //取到时间
        var time = arr[0].split("."); //变成["03:01","08"]
        //取到time下标为0的分钟和秒
        var ctime = time[0].split(":"); //变成["03","01"];
        //将上一行的秒数赋值给bofo
        bofo = ms;
        //转化成秒数
        ms = ctime[0]*60 + ctime[1]*1;
        //如果上一行和当前行秒数相同，则当前行秒数++ ,解决秒数相同的办法
        if(bofo == ms){
          ms++;
        } else if (ms >= 0){
          if(!isNaN(bofo)){ // 如果是数字
            var classeName = "l_"+bofo;
            var concon = bofo; // bofo会自增，所以下面for循环条件用这个变量来代替
            for(var j = 0;j < ms-concon-1;j++){
              classeName += " l_"+ ++bofo;
            }
            if(ms>=0 && lrclast != null){
              html += "<li class='"+classeName+"'>"+lrclast+"</li>";
            }
          }
        }
      }
      //装载最后一行歌词的机制，先获取歌曲总时间
      setTimeout(function(){
        var allall = krAudio.audioDom.duration;
        var classlaName = "l_"+ms;
        var conben = ms; //ms会自增，所以下面for循环条件必须用这个变量来代替
        for(var j = 0;j < allall-conben-1;j++){
          classlaName += " l_"+ ++ms;
        }
        html += "<li class='"+classlaName+"'>"+lrcmes+"</li>";
        //把解析好的歌词放入歌词展示区中
        $("#lrcly").html(html);
        $("#lyrics").html(html);
      },200);
    }
  });
  // 联动音乐播放歌词
  krAudio.audioDom.addEventListener("timeupdate",function(){
    //获取当前播放时间,获得的是秒数
    var time = this.currentTime;
    //解析音乐对应的时间
    var m = parseInt(time / 60);//获取此时的分钟
    var s = parseInt(time); //转换int类型，获取此时的秒数
    $(".l_"+s).addClass("lrcsel").siblings().removeClass("lrcsel");
    //歌词滚动条，使歌词在中间的计算公式：
    //第n行歌词*li的高度-歌词区域中间的li（就是包括这个li,取这个li的一半）以上的li的总高度
    //局部歌词的控制
    $(".lrc_content_box").stop().animate({
      scrollTop:(($(".lrcsel").index()+1)*29 - 145)//减去偏差，使当前歌词在中间
    },240);
    //全屏歌词的控制
    $("#lyrics").stop().animate({
      scrollTop:(($(".lrcsel").index()+1)*24 - 168)//减去偏差，使当前歌词在中间
    },240);
  });
},

var reg = /-/g;  // g表示全部替换 ，要替换的字符串是-
createTime = createTime.replace(reg,"/"); // 第二个参数表示替换成 /
 // 替换成2018/04/03 歌词解析//解析歌词
function parseLyric(lrc) {
 var lyrics = lrc.split("\n");
 var lrcText = {};
 for(var i=0;i<lyrics.length;i++){
   var lyric = decodeURIComponent(lyrics[i]);
   var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
   var timeRegExpArr = lyric.match(timeReg);
   if(!timeRegExpArr)continue;
   var clause = lyric.replace(timeReg,'');
   for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
     var t = timeRegExpArr[k];
     var min = Number(String(t.match(/\[\d*/i)).slice(1)),
     sec = Number(String(t.match(/\:\d*/i)).slice(1));
     var time = min * 60 + sec;
     lrcText[time] = clause;
   }
 }
 return lrcText;
}