Переглянути джерело

调整全屏样式,分离全屏和非全屏的样式,把全屏按钮改成全屏播放

ecd\tbw_1357250783514014 4 роки тому
батько
коміт
3330d3e3be

+ 5 - 4
src/chanting/evening_chanting_A.md

@@ -3,13 +3,14 @@
 <audio id="audio" controls style="width:100%;">
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课(礼敬洁地)1031.mp3" type="audio/mpeg">
 </audio>
+<button id='lyricFullscreen'>全屏播放</button>
 </div>
-<div class="live" id="lyriccontainer">
-	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
-	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+
+<div id="lyriccontainer">
+	<div id="line-last"><span></span><span></span></div>
+	<div id="line-current" class='active'><span></span><span></span></div>
 	<div id="line-next"><span></span><span></span></div>
 </div>
-<button id='lyricFullscreen'> 全 屏 </button>
 <div>
 
 ## Ratanattaya vandanā(礼拜三宝)

+ 4 - 4
src/chanting/evening_chanting_B.md

@@ -3,13 +3,13 @@
 <audio id="audio" controls style="width:100%;">
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课(傣)1031.mp3" type="audio/mpeg">
 </audio>
+<button id='lyricFullscreen'>全屏播放</button>
 </div>
-<div class="live" id="lyriccontainer">
-	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
-	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+<div id="lyriccontainer">
+	<div id="line-last"><span></span><span></span></div>
+	<div id="line-current" class='active'><span></span><span></span></div>
 	<div id="line-next"><span></span><span></span></div>
 </div>
-<button id='lyricFullscreen'> 全 屏 </button>
 <div>
 
 ## ᩁᨲᨶᨲ᩠ᨲᨿ ᩅᨶ᩠ᨴᨶᩣ(礼拜三宝)

+ 5 - 4
src/chanting/evening_chanting_C.md

@@ -6,13 +6,14 @@
 <audio id="audio" controls style="width:100%;">
   <source src="http://122.114.50.251:8010/jly/audio/dhammacakka_0218.mp3" type="audio/mpeg">
 </audio>
+<button id='lyricFullscreen'>全屏播放</button>
 </div>
-<div class="live" id="lyriccontainer">
-	<div id="line-last" style="padding-left:0vw;"><span></span><span></span></div>
-	<div id="line-current" class='active' style="padding-left:4vw;height:30vh;"><span></span><span></span></div>
+<div id="lyriccontainer">
+	<div id="line-last"><span></span><span></span></div>
+	<div id="line-current" class='active'><span></span><span></span></div>
 	<div id="line-next"><span></span><span></span></div>
 </div>
-<button id='lyricFullscreen'> 全 屏 </button>
+
 Evaṃ me sutaṃ- ekaṃ samayaṃ bhagavā bārāṇasiyaṃ viharati isipatane migadāye. 
 
 Tatra kho bhagavā pañcavaggiye bhikkhū āmantesi– 

+ 54 - 18
theme/mycss/lrc.css

@@ -1,29 +1,65 @@
-*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
-    background-color: white;
+#lyriccontainer:fullscreen,-webkit-full-screen,-moz-full-screen,-ms-fullscreen {
+	background-color: white;
+	align-items: center;
+	justify-content: center;
+	font-size: 5rem;
+}
+
+#lyriccontainer:fullscreen > #line-last {
+	padding-left: 0rem;
 }
-::backdrop
-{
-    background-color: white;
+
+#lyriccontainer:fullscreen > #line-current {
+	padding-left: 0rem;
+}
+
+#lyriccontainer:fullscreen > #line-next {
+	padding-left: 0rem;
 }
-.live {
+
+#lyriccontainer {
 	background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%);
-	font-size:4vmin;
+	font-size: 4rem;
 	display: flex;
-	align-items: center;
-	justify-content: center;
-	width:100%;
-	flex-direction: column
+	width: 100%;
+	flex-direction: column;
 }
-.live .active {
-  font-weight:bold
+
+#lyriccontainer .active {
+	font-weight: bold
 }
-.live div {
-  height:25vh;
-  display: flex;
-  flex-direction: column;
-  padding-left:6vw
+
+#lyriccontainer div {
+	display: flex;
+	flex-direction: column;
 }
 
+#lyriccontainer #line-last {
+	height: 25rem;
+	padding-left: 1rem;
+}
 
+#lyriccontainer #line-current {
+	height: 30rem;
+	padding-left: 4rem;
+}
 
+#lyriccontainer #line-next {
+	height: 25rem;
+	padding-left: 6rem;
+}
 
+#lyricFullscreen {
+	height: 3rem;
+	width: 10rem;
+	color: #fff;
+	text-shadow: 0 1px 0 rgba(0,0,0,.2);
+	background-color: #57a957;
+	border-color: #57a957;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
+	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+	background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+	background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+	background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+	background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
+}

+ 177 - 163
theme/myjs/lrc.js

@@ -35,195 +35,209 @@
  * ========================================================== */
 
 (function($) {
-    var gtime=0;
+    var gtime = 0;
     var lyric_listener;
     $.fn.jqlyric = function(options) {
-        var opts = $.extend({}, $.fn.jqlyric.defaults, 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;          //当前活动的歌词行号
+        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 arrly=o.lyric.split('\n');console.log(arrly);
-
-            for(var i=0;i<arrly.length;i++){
-                var str=arrly[i];
-				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));   //放时间    
-				}
+            var arrly = o.lyric.split('\n'); //console.log(arrly);
+            for (var i = 0; i < arrly.length; i++) {
+                var str = arrly[i];
+                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)); //放时间    
+                }
             }
 
             // 所有歌词按时间顺序排列
-            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;
+            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;
                     }
                 }
             }
-			var arrLyricObj=new Array();
-			for(var k=0;k<arrTime.length;k++){
-				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);
-			}
-            
+            var arrLyricObj = new Array();
+            for (var k = 0; k < arrTime.length; k++) {
+                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;
-			var timeFun=function (){     // 定时检查当前播放进度,作出滚动动作
-                var pos=o.getPosition();
-				for(var k=0;k<arrLyricObj.length;k++){
-					if(pos>=arrLyricObj[k].timeStart&&pos<=arrLyricObj[k].timeEnd){
-						if($("#line-current").attr("currentLine")!=k&&fadeFinish){
-							if(k>0){
-								$("#line-last span").fadeOut(400,function(){
-									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(400,function(){
-										fadeFinish=true;
-									});
-								});
-							}
-							if(k<arrTime.length-1){
-								$("#line-next span").fadeOut(400,function(){
-									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(400,function(){
-										fadeFinish=true;
-									});
-								});
-							}
-							fadeFinish=false;
-							$("#line-current span").fadeOut(400,function(){
-								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(400,function(){
-									fadeFinish=true;
-								});
-								
-							});
-							
-							break;
-						}
-					}
-				}
-				lyric_listener=setTimeout(timeFun,o.speed);
+            var fadeFinish = true;
+            var timeFun = function() { // 定时检查当前播放进度,作出滚动动作
+                var pos = o.getPosition();
+                for (var k = 0; k < arrLyricObj.length; k++) {
+                    if (pos >= arrLyricObj[k].timeStart && pos <= arrLyricObj[k].timeEnd) {
+                        if ($("#line-current").attr("currentLine") != k && fadeFinish) {
+                            if (k > 0) {
+                                $("#line-last span").fadeOut(400,
+                                function() {
+                                    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(400,
+                                    function() {
+                                        fadeFinish = true;
+                                    });
+                                });
+                            }
+                            if (k < arrTime.length - 1) {
+                                $("#line-next span").fadeOut(400,
+                                function() {
+                                    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(400,
+                                    function() {
+                                        fadeFinish = true;
+                                    });
+                                });
+                            }
+                            fadeFinish = false;
+                            $("#line-current span").fadeOut(400,
+                            function() {
+                                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(400,
+                                function() {
+                                    fadeFinish = true;
+                                });
+
+                            });
+
+                            break;
+                        }
+                    }
+                }
+                lyric_listener = setTimeout(timeFun, o.speed);
             };
-            lyric_listener=setTimeout(timeFun,o.speed);
+            lyric_listener = setTimeout(timeFun, o.speed);
         });
     };
 
-    $.fn.jqlyric.defaults={
-        lyric:'[00:00.00]未找到歌词',   // 歌词字符串 (lrc格式)
-        speed:500,                      // 歌词进度一首歌间隔(毫秒)
-        getPosition:function(){         // 获取播放器当前播放位置
-            gtime+=0.5;
+    $.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;
+    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;
+        if (isNaN(totalt)) return 0;
         return totalt;
     }
 
 })(jQuery);
 
-$(function() { 
-  var audio=document.getElementById("audio");
-  if(!audio){
-	  return;
-  }
-  var fun_getPosition=function(){
-	return audio.currentTime;
-  } 
-  var url=audio.currentSrc;
-  var urlArr = url.split('?');
-  var k = urlArr[0], appU = k.split('/');
-  var srcFileExt = appU[appU.length - 1].split('.')[1];
-  url=url.replace("."+srcFileExt,".lrc");
-  var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url="+(url);  
-  var $container=$('#lyriccontainer');
-  $('#lyricFullscreen').click(function(event){
-	var element=$container[0];
-	$('#lyriccontainer li').attr("css","liveli");
-  // 判断浏览器前缀
-  if (document.fullscreenEnabled) {
-   if(element.requestFullscreen){
-        element.requestFullscreen();
-    } else if(element.mozRequestFullScreen) {
-        element.mozRequestFullScreen();
-    } else if(element.webkitRequestFullscreen) {
-        element.webkitRequestFullscreen();
-    } else if(element.msRequestFullscreen) {
-        element.msRequestFullscreen();
+$(function() {
+    var audio = document.getElementById("audio");
+    if (!audio) {
+        return;
     }
-  }
-  });
-  console.log(url);
-  $.getJSON(url, function(data){  
-	var lrcContent=data.data;console.log(lrcContent);
-	if(!lrcContent||lrcContent==""){
-		return;
-	}
-	 //用于显示歌词的容器对象,样式自己定义
-	$container.jqlyric({
-		  lyric:lrcContent,   // 歌词字符串,标准lrc文件格式
-		  getPosition:fun_getPosition
-	});
-  }); 	
+    var fun_getPosition = function() {
+        return audio.currentTime;
+    }
+    var url = audio.currentSrc;
+    var urlArr = url.split('?');
+    var k = urlArr[0],
+    appU = k.split('/');
+    var srcFileExt = appU[appU.length - 1].split('.')[1];
+    url = url.replace("." + srcFileExt, ".lrc");
+    var url = "http://122.114.50.251:8010/getJSON.php?callback=?&url=" + (url);
+    var $container = $('#lyriccontainer');
+
+    $('#lyricFullscreen').click(function(event) {
+        var element = $container[0];
+        audio.play();
+        // 判断浏览器前缀
+        if (document.fullscreenEnabled) {
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
+            } else if (element.webkitRequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if (element.msRequestFullscreen) {
+                element.msRequestFullscreen();
+            }
+        }
+    });
+    //console.log(url);
+    $.getJSON(url,
+    function(data) {
+        var lrcContent = data.data; //console.log(lrcContent);
+        if (!lrcContent || lrcContent == "") {
+            return;
+        }
+        //用于显示歌词的容器对象,样式自己定义
+        $container.jqlyric({
+            lyric: lrcContent,
+            // 歌词字符串,标准lrc文件格式
+            getPosition: fun_getPosition
+        });
+    });
 });