Sfoglia il codice sorgente

增加全屏显示歌词,改用flex布局

ecd\tbw_1357250783514014 4 anni fa
parent
commit
fa840e9914

+ 5 - 8
src/chanting/evening_chanting_A.md

@@ -4,15 +4,12 @@
   <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课(礼敬洁地)1031.mp3" type="audio/mpeg">
 </audio>
 </div>
-<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: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 class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
+	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
+	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
+	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></span></div>
 </div>
+<button id='lyricFullscreen'> 全 屏 </button>
 <div>
 
 ## Ratanattaya vandanā(礼拜三宝)

+ 13 - 0
src/chanting/evening_chanting_B.md

@@ -1,3 +1,16 @@
+<div>
+<audio id="audio" controls style="width:100%;">
+  <source src="http://122.114.50.251:8010/jly/audio/大金塔晚课(傣)1031.mp3" type="audio/mpeg">
+</audio>
+</div>
+<div class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
+	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
+	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
+	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></span></div>
+</div>
+<button id='lyricFullscreen'> 全 屏 </button>
+<div>
+
 # **晚 课**<br>**大金塔课诵本**<br>**傣调试用版**
 
 ## ᩁᨲᨶᨲ᩠ᨲᨿ ᩅᨶ᩠ᨴᨶᩣ(礼拜三宝)

+ 5 - 8
src/chanting/evening_chanting_C.md

@@ -7,15 +7,12 @@
   <source src="http://122.114.50.251:8010/jly/audio/dhammacakka_0218.mp3" type="audio/mpeg">
 </audio>
 </div>
-<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: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 class="live" id="lyriccontainer" style="font-size:4vmin;display: flex;align-items: center;justify-content: center;width:100%;flex-direction: column">
+	<div id="line-last" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-top"><span></span><span></span></div>
+	<div id="line-current" class='active' style="height:30vh;display: flex;flex-direction: column;width:100%"><span style="margin-left:4vw"></span><span style="margin-left:4vw"></span></div>
+	<div id="line-next" style="height:25vh;display: flex;flex-direction: column;width:100%" class="to-bottom"><span style="margin-left:6vw"></span><span style="margin-left:6vw"></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– 

+ 14 - 6
theme/mycss/lrc.css

@@ -1,17 +1,25 @@
-
+.live {
+	background:white;
+}
 .live .active {
   background: rgb(202,234,206);
   font-weight:bold
 }
 .live ul{
-	list-style-type:none;
-	padding:0 0 0 0;
+	list-style-type:none;	
 }
-
-.live li span{
-	display:block
+.live li{
+	flex-direction:column;
+}
+.liveli {
+    /*实现垂直居中*/
+    align-items: center;
+    /*实现水平居中*/
+    justify-content: center;
+	flex-direction: column
 }
 
+	
 .live ul{
 	font-family:"Times New Roman",Georgia,Serif;
 }

+ 21 - 5
theme/myjs/lrc.js

@@ -50,8 +50,7 @@
 
             // 开始解析歌词
             //将歌词解析成数组
-			console.log(o.lyric);
-            var arrly=o.lyric.split('\n');
+            var arrly=o.lyric.split('\n');console.log(arrly);
 
             for(var i=0;i<arrly.length;i++){
                 var str=arrly[i];
@@ -198,13 +197,30 @@ $(function() {
   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();
+    }
+  }
+  });
+  console.log(url);
   $.getJSON(url, function(data){  
-	var lrcContent=data.data;
+	var lrcContent=data.data;console.log(lrcContent);
 	if(!lrcContent||lrcContent==""){
 		return;
 	}
-	var $container=$('#lyriccontainer'); //用于显示歌词的容器对象,样式自己定义
+	 //用于显示歌词的容器对象,样式自己定义
 	$container.jqlyric({
 		  lyric:lrcContent,   // 歌词字符串,标准lrc文件格式
 		  getPosition:fun_getPosition