فهرست منبع

增加弹窗全屏调节字体大小的功能,增加歌词切换的时间精度

ecd\tbw_1357250783514014 4 سال پیش
والد
کامیت
03c5f690e1
5فایلهای تغییر یافته به همراه57 افزوده شده و 43 حذف شده
  1. 1 1
      src/chanting/evening_chanting_A.md
  2. 1 1
      src/chanting/evening_chanting_B.md
  3. 1 1
      src/chanting/evening_chanting_C.md
  4. 29 20
      theme/mycss/lrc.css
  5. 25 20
      theme/myjs/lrc.js

+ 1 - 1
src/chanting/evening_chanting_A.md

@@ -1,6 +1,6 @@
 # **晚 课**<br>**大金塔课诵本**<br>**傣调试用版**
 
-<div id="lyriccontainer" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/buddha_city.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
+<div id="lyriccontainer" class="def-lyric" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/buddha_city.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
 	<audio id="audio" controls style="width: 100%;">
 	  <source src="https://djt-res.fzcl.org.cn/jly/audio/大金塔晚课(礼敬洁地)1031.mp3" type="audio/mpeg">
 	</audio>

+ 1 - 1
src/chanting/evening_chanting_B.md

@@ -1,5 +1,5 @@
 # **晚 课**<br>**大金塔课诵本**<br>**傣调试用版**
-<div id="lyriccontainer" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/buddha_city.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
+<div id="lyriccontainer" class="def-lyric" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/buddha_city.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
 	<audio id="audio" controls style="width: 100%;">
 	  <source src="https://djt-res.fzcl.org.cn/jly/audio/大金塔晚课(傣)1031.mp3" type="audio/mpeg">
 	</audio>

+ 1 - 1
src/chanting/evening_chanting_C.md

@@ -1,6 +1,6 @@
 # 转动法之轮经<br/>dhammacakkappavattanasuttaṃ
 
-<div id="lyriccontainer" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/5_bhikkhu.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
+<div id="lyriccontainer" class="def-lyric" style="background-image:url('https://djt-res.fzcl.org.cn/jly/img/5_bhikkhu.jpg');background-size:cover;--full-font-size: 4vmin;--default-font-size: 1.6rem;">
 	<audio id="audio" controls style="width: 100%;">
 	  <source src="https://djt-res.fzcl.org.cn/jly/audio/dhammacakka_0218.mp3" type="audio/mpeg">
 	</audio>

+ 29 - 20
theme/mycss/lrc.css

@@ -1,32 +1,41 @@
-
-
-#lyriccontainer:fullscreen {
-	background-color: white;
+.fullscreen-lyric {
 	align-items: center;
 	justify-content: center;
 	font-size: var(--full-font-size);
+	flex-direction: column;
 }
 
-#lyriccontainer:fullscreen > #line-last {
+.fullscreen-lyric #line-last {
 	height: 30vh;
-	padding-left: 0rem;
 }
 
-#lyriccontainer:fullscreen > #line-current {
-	height: 40vh;
-	padding-left: 0rem;
+.fullscreen-lyric #line-current {
+	height: 30vh;
 }
 
-#lyriccontainer:fullscreen > #line-next {
+.fullscreen-lyric #line-next {
 	height: 30vh;
-	padding-left: 0rem;
 }
-
-#lyriccontainer:fullscreen > div {
+.fullscreen-lyric #line-tools {
+	font-size: 1.6rem;
+	align-items: center;
+	justify-content: center;
+	flex-direction:row;
+	width:100%
+}
+.fullscreen-lyric div {
 	justify-content: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
-#lyriccontainer {
+.fullscreen-lyric .active {
+	font-weight: bold
+}
+
+
+.def-lyric {
 	background: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(202,234,206) 50%, rgba(0,0,0,.1) 100%);
 	font-size: var(--default-font-size);
 	display: flex;
@@ -35,16 +44,16 @@
 	height:100%;
 }
 
-#lyriccontainer .active {
+.def-lyric .active {
 	font-weight: bold
 }
 
-#lyriccontainer div {
+.def-lyric div {
 	display: flex;
 	flex-direction: column;
 }
 
-#lyriccontainer #line-tools {
+.def-lyric #line-tools {
 	font-size: 1.6rem;
 	align-items: center;
 	justify-content: center;
@@ -52,17 +61,17 @@
 	width:100%
 }
 
-#lyriccontainer #line-last {
+.def-lyric #line-last {
 	height: 8em;
 	padding-left: 1em;
 }
 
-#lyriccontainer #line-current {
+.def-lyric #line-current {
 	height: 8em;
 	padding-left: 1.5em;
 }
 
-#lyriccontainer #line-next {
+.def-lyric #line-next {
 	height: 8em;
 	padding-left: 2em;
 }

+ 25 - 20
theme/myjs/lrc.js

@@ -158,10 +158,9 @@
 	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, ""));
+		s = parseFloat(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;
 	}
@@ -191,14 +190,15 @@ $(function() {
 	appU = k.split('/');
 	var srcFileExt = appU[appU.length - 1].split('.')[1];
 	url = url.replace("." + srcFileExt, ".lrc");
-	var url = "https://djt-res.fzcl.org.cn/getJSON.php?callback=?&url=" + (url);
+	var url = "https://djt-res.fzcl.org.cn/getJSON.php?callback=?&url=" + url;
 	var $container = $('#lyriccontainer');
 	var noSleep = new NoSleep();
 	var enableNoSleep = false;
 	var isFullScreen = false;
+	var layerIndex=0;
 	var btn_lyricFullscreen = document.getElementById("lyricFullscreen");
 	//  监听全屏事件触发
-	var fullscreenchange = function() {
+	var fullScreenChangeListener = function() {
 		isFullScreen = !!(
         document.fullscreen ||
         document.mozFullScreen ||
@@ -206,17 +206,22 @@ $(function() {
         document.webkitFullScreen ||
         document.msFullScreen
       );
+	  doChangeFullScreen(isFullScreen);
+	}; 
+	var doChangeFullScreen=function(isFullScreen){
 		if (isFullScreen) {
 			if(!enableNoSleep){noSleep.enable();}
 			$(btn_lyricFullscreen).html('退出全屏');
 			enableNoSleep = true;
+			$container.removeClass("def-lyric").addClass("fullscreen-lyric");
 		} else {
 			if(enableNoSleep){noSleep.disable();}
 			$(btn_lyricFullscreen).html('全屏播放');
 			enableNoSleep = false;
+			$container.removeClass("fullscreen-lyric").addClass("def-lyric");
 		}
 		$("#lyricSleep").prop("checked",enableNoSleep);
-	}; 
+	};
 	if (btn_lyricFullscreen) {
 		btn_lyricFullscreen.addEventListener('click',
 		function(event) {
@@ -239,21 +244,29 @@ $(function() {
 				}
 			}else{
 				if($(btn_lyricFullscreen).html()=='全屏播放'){
-					var i=layer.open({
+					layerIndex=layer.open({
 					  type: 1,
 					  title: false,
-					  content: $container
+					  content: $container,
+					  end : function() {
+						isFullScreen=false;
+						doChangeFullScreen(false);
+					  }
 					});
-					layer.full(i);
+					isFullScreen=true;
+					doChangeFullScreen(true);
+					layer.full(layerIndex);
 				}else{
-					
+					isFullScreen=false;
+					doChangeFullScreen(false);
+					layer.close(layerIndex);
 				}
 			}
 		});
 	}
 	
 	['fullscreenchange','webkitfullscreenchange','mozfullscreenchange'].forEach((item,index) => {
-          $container[0].addEventListener(item, () => fullscreenchange());
+          $container[0].addEventListener(item, () => fullScreenChangeListener());
     });
 
 	$.getJSON(url,
@@ -266,7 +279,8 @@ $(function() {
 		$container.jqlyric({
 			lyric: lrcContent,
 			// 歌词字符串,标准lrc文件格式
-			getPosition: fun_getPosition
+			getPosition: fun_getPosition,
+			speed:50
 		});
 	});
 
@@ -337,13 +351,4 @@ $(function() {
 			}
 		});
 	}
-	
-	var btn_lyricCache = document.getElementById("lyricCache");
-	if (btn_lyricCache) {
-		btn_lyricCache.addEventListener('click',
-		function() {
-			audio.preload="auto";
-		},
-		false);
-	}
 });