diff --git a/html/document.js b/html/document.js
index f67d247..5e88816 100644
--- a/html/document.js
+++ b/html/document.js
@@ -180,7 +180,9 @@ const data = {
output: '',
downloadFilename: '[One-Last-Image].jpg',
previewWidth,
- previewHeight
+ previewHeight,
+ lyrics: null,
+ lyricIndex: 0
};
@@ -271,4 +273,47 @@ louvreInit( _=>{
const { img } = app.$refs;
img.onload = app.setImageAndDraw;
if(img.complete) img.onload();
-});
\ No newline at end of file
+});
+
+
+
+
+
+setTimeout(_=>{
+
+ fetch('one-last-kiss.lrc').then(r=>r.text()).then(r=>{
+ const lyrics = lyricParse(r);
+ app.lyrics = lyrics;
+ const lastLyric = lyrics[lyrics.length-1];
+ const duration = lastLyric[0];
+
+
+ const getCurrentTime = _=>{
+ const now = +new Date()/1000;
+ const currentTime = now % duration;
+
+ return currentTime;
+ };
+ const getCurrentIndex = _=>{
+ const currentTime = getCurrentTime();
+
+
+ for(let i = lyrics.length - 1;i >= 0 ;i--){
+ let lyric = lyrics[i]
+ if(lyric[0] < currentTime){
+ return i;
+ }
+ }
+ return 0;
+ };
+ const getCurrentLyric = _=>{
+ return lyrics[getCurrentIndex()]
+ }
+ setInterval(_=>{
+ const index = getCurrentIndex();
+ // const lyric = getCurrentLyric();
+ app.lyricIndex = index;
+
+ },500);
+ })
+},2000);
\ No newline at end of file
diff --git a/html/document.less b/html/document.less
index 65082d8..64ded87 100644
--- a/html/document.less
+++ b/html/document.less
@@ -1,5 +1,7 @@
:root{
--background-color: #c3c3c3;
+ --background-color-transparent-half: rgba(195,195,195,.5);
+ --background-color-transparent: rgba(195,195,195,0);
--color-font: #111;
}
html{
@@ -203,7 +205,7 @@ h1{
}
footer{
- padding:40px 0 100px;
+ padding:40px 0 80px;
line-height: 3;
a{
display: inline-block;
@@ -307,4 +309,67 @@ footer{
background:#999;
pointer-events: none;
}
+}
+
+
+
+.lyric-box{
+ --lyric-padding: 100px;
+ height: 48px;
+ overflow: hidden;
+ margin: 20px 0 140px;
+ padding: var(--lyric-padding) 0;
+ position: relative;
+ z-index:0;
+ &:before,
+ &:after{
+ content: '';
+ display: block;
+ height:var(--lyric-padding);
+ position: absolute;
+ left:0;
+ right:0;
+ z-index:1;
+ }
+ &:before{
+ top:0;
+ background-image: linear-gradient(
+ 180deg,
+ var(--background-color),
+ var(--background-color-transparent-half),
+ var(--background-color-transparent)
+ );
+ }
+ &:after{
+ bottom:0;
+ background-image: linear-gradient(
+ 0deg,
+ var(--background-color),
+ var(--background-color-transparent-half),
+ var(--background-color-transparent)
+ );
+ }
+ .list{
+ transition: transform .3s ease;
+ }
+ .item{
+ box-sizing: border-box;
+ height:48px;
+ line-height: 20px;
+ padding:14px 0;
+ &[data-have-cn="true"]{
+ padding:4px 0;
+ }
+ .cn{
+ opacity: 0.4;
+ font-size:12px;
+ }
+
+ transition: opacity .3s ease;
+ opacity: 0.3;
+
+ &[data-current="true"]{
+ opacity: 1;
+ }
+ }
}
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index ee8e9e5..1b42da2 100644
--- a/html/index.html
+++ b/html/index.html
@@ -215,10 +215,27 @@
神奇海螺实验室
@卜卜口
+
+
+
diff --git a/html/lyric.js b/html/lyric.js
new file mode 100644
index 0000000..ecacc47
--- /dev/null
+++ b/html/lyric.js
@@ -0,0 +1,17 @@
+const isLyricLine = /^\[(\d+)\:(\d+(?:\.\d+))\](.+?)(?:「(.+)」)?$/;
+
+const lyricParse = (text)=>{
+ let lyrics = [];
+ text.trim().split(/\s{0,}\n\s{0,}/g).forEach(t=>{
+ const match = t.match(isLyricLine);
+ if(!match) return;
+ const [_,mm,ss,text,cn] = match;
+ const s = mm * 60 + Number(ss);
+ lyrics.push([
+ s,
+ text.trim(),
+ cn?cn.trim():''
+ ]);
+ });
+ return lyrics.sort((a,b)=>b[0]