更改歌词样式，新增双语歌词，简化歌词处理逻辑

src/chanting/evening_chanting_A.md

@@ -7,9 +7,9 @@
 <div class="live" id="lyriccontainer" style="height:90vh;font-size:4vmin;width: calc(100%);left: 0;">
      <div class="fixed-lyric-box">
 		 <ul class="lyric-list" style="display:block">
-			<li id="line-last" style="height:15vh" class="to-bottom"><span></span></li>
-			<li id="line-current" class='active' style="height:15vh;padding-left:10vw"><span></span></li>
-			<li id="line-next" style="height:15vh;padding-left:20vw;" class="to-top"><span></span></li>
+			<li id="line-last" style="height:25vh" class="to-top"><span></span><span></span></li>
+			<li id="line-current" class='active' style="height:30vh;padding-left:5vw"><span></span><span></span></li>
+			<li id="line-next" style="height:25vh;padding-left:10vw;" class="to-bottom"><span></span><span></span></li>
 		 </ul>
 	 </div>
 </div>

theme/mycss/lrc.css

@@ -8,6 +8,10 @@
 	padding:0 0 0 0;
 }
 
+.live li span{
+	display:block
+}
+
 .live ul{
 	font-family:"Times New Roman",Georgia,Serif;
 }

theme/myjs/lrc.js

@@ -49,54 +49,26 @@
             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('||');
+            var arrly=o.lyric.split('\r\n');
 
             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(/([ti|ar|al|by])/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)));   //放时间       
-							
-                        }
-                    }
-                }
+				str=str.substring(str.indexOf("[")+1,str.indexOf("]"));
+
+				if(str.indexOf('ti:')>-1||str.indexOf('ar:')>-1||str.indexOf('al:')>-1||str.indexOf('by:')>-1){
+					// 歌曲特征字段
+					var tmp=str.substring(str.indexOf(':')+1);
+					var text=tmp;
+					//tag=tag.replace(/([ti|ar|al|by])/g,'');
+					//arrLyric.push(tag+text);
+					//arrTime.push(toSeconds('00:00:00'));   //
+				}else{
+					var text=arrly[i].substring(arrly[i].indexOf("]")+1);
+					//if(text==''){text='&nbsp;';}
+					arrLyric.push(text);              //放歌词
+					arrTime.push(toSeconds(str));   //放时间    
+				}
             }
 
             // 所有歌词按时间顺序排列
@@ -115,14 +87,20 @@
             }
 			var arrLyricObj=new Array();
 			for(var k=0;k<arrTime.length;k++){
-				var timeStart=arrTime[k]?arrTime[k]:0;
-				var timeEnd=arrTime[k+1]?arrTime[k+1]-0.01:99999999999999;
 				var lrcContent=arrLyric[k];
+				var len=lrcContent.replace(/(^s*)|(s*$)/g, "").length;//console.log(lrcContent.charCodeAt(0).toString(16));
+				if(!lrcContent|| len==0){
+					continue;
+				}
+				var timeStart=arrTime[k];
+				var timeEnd=k<arrTime.length-1?arrTime[k+1]-0.01:99999999999999;
+				if(timeEnd<0){
+					continue;
+				}
 				
 				var lrc={timeStart:timeStart,timeEnd:timeEnd,lrcContent:lrcContent};
 				arrLyricObj.push(lrc);
 			}
-          
             
             clearTimeout(lyric_listener);
 			var fadeFinish=true;
@@ -130,22 +108,41 @@
                 var pos=o.getPosition();
 				for(var k=0;k<arrLyricObj.length;k++){
 					if(pos>=arrLyricObj[k].timeStart&&pos<=arrLyricObj[k].timeEnd){
-						if($("#line-current").text()!=arrLyricObj[k].lrcContent&&fadeFinish){
+						if($("#line-current").attr("currentLine")!=k&&fadeFinish){
 							if(k>0){
 								$("#line-last span").fadeOut(1000,function(){
-									$("#line-last span").text(arrLyricObj[k-1].lrcContent);
-									$("#line-last span").fadeIn(1000);
+									var lc=arrLyricObj[k-1].lrcContent.split("<br/>");
+									$("#line-last span:eq(0)").text(lc[0]);
+									if(lc.length>1){
+										$("#line-last span:eq(1)").text(lc[1]);
+									}
+									$("#line-last").attr("currentLine",k);
+									$("#line-last span").fadeIn(1000,function(){
+										fadeFinish=true;
+									});
 								});
 							}
 							if(k<arrTime.length-1){
 								$("#line-next span").fadeOut(1000,function(){
-									$("#line-next span").text(arrLyricObj[k+1].lrcContent);
-									$("#line-next span").fadeIn(1000);
+									var lc=arrLyricObj[k+1].lrcContent.split("<br/>");
+									$("#line-next span:eq(0)").text(lc[0]);
+									if(lc.length>1){
+										$("#line-next span:eq(1)").text(lc[1]);
+									}
+									$("#line-next").attr("currentLine",k);
+									$("#line-next span").fadeIn(1000,function(){
+										fadeFinish=true;
+									});
 								});
 							}
 							fadeFinish=false;
 							$("#line-current span").fadeOut(1000,function(){
-								$("#line-current span").text(arrLyricObj[k].lrcContent);
+								var lc=arrLyricObj[k].lrcContent.split("<br/>");
+								$("#line-current span:eq(0)").text(lc[0]);
+								if(lc.length>1){
+									$("#line-current span:eq(1)").text(lc[1]);
+								}
+								$("#line-current").attr("currentLine",k);
 								$("#line-current span").fadeIn(1000,function(){
 									fadeFinish=true;
 								});