mirror of
https://github.com/itorr/one-last-image.git
synced 2026-01-02 20:06:03 +08:00
加入歌词
This commit is contained in:
itorr
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -215,10 +215,27 @@
|
||||
<a href="https://lab.magiconch.com" target="_blank">神奇海螺实验室</a>
|
||||
<a href="https://weibo.com/reiove" target="_blank">@卜卜口</a>
|
||||
</footer>
|
||||
|
||||
<div class="lyric-box">
|
||||
<div class="list" :style="{
|
||||
transform: `translateY(-${lyricIndex * 48}px)`
|
||||
}" v-if="lyrics">
|
||||
<div class="item"
|
||||
v-for="lyric,index in lyrics"
|
||||
:data-current="index === lyricIndex"
|
||||
:data-s="lyric[0]"
|
||||
:key="lyric[0]"
|
||||
:data-have-cn="!!lyric[2]">
|
||||
<div class="text" v-text="lyric[1]"></div>
|
||||
<div class="cn" v-if="lyric[2]" v-text="lyric[2]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://lab.magiconch.com/vue.2.6.11.min.js"></script>
|
||||
<script src="color.js"></script>
|
||||
<script src="lyric.js"></script>
|
||||
<!-- <script src="bezier-easing.js"></script> -->
|
||||
<script src="louvre.js"></script>
|
||||
<script src="ui-tabs.vue.js"></script>
|
||||
|
||||
17
html/lyric.js
Normal file
17
html/lyric.js
Normal file
@@ -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]<a[0]?1:-1);
|
||||
};
|
||||
@@ -1,57 +1,60 @@
|
||||
[00:00.000] 作词 : 宇多田ヒカル
|
||||
[00:01.000] 作曲 : 宇多田ヒカル/A. G. Cook
|
||||
[ti:One Last Kiss]
|
||||
[ar:宇多田光 (宇多田ヒカル)]
|
||||
[al:One Last Kiss]
|
||||
[by:itorr]
|
||||
[offset:0]
|
||||
[00:18.610]
|
||||
[00:20.542]初めてのルーブルは
|
||||
[00:22.559]なんてことはなかったわ
|
||||
[00:24.765]私だけのモナリザ
|
||||
[00:26.713]もうとっくに出会ってたから
|
||||
[00:29.125]初めてあなたを見た
|
||||
[00:30.973]あの日動き出した歯車
|
||||
[00:33.327]止められない喪失の予感
|
||||
[00:20.542]初めてのルーブルは「第一次参观卢浮宫」
|
||||
[00:22.559]なんてことはなかったわ「却并不觉得震撼」
|
||||
[00:24.765]私だけのモナリザ「因为我早已遇见」
|
||||
[00:26.713]もうとっくに出会ってたから「独属于我的蒙娜丽莎」
|
||||
[00:29.125]初めてあなたを見た「初遇你的那天起」
|
||||
[00:30.973]あの日動き出した歯車「齿轮便开始转动」
|
||||
[00:33.327]止められない喪失の予感「却无法阻止丧失的预感」
|
||||
[00:37.257]
|
||||
[00:37.728]もういっぱいあるけど
|
||||
[00:43.372]もう一つ増やしましょう
|
||||
[00:47.700](Can you give me one last kiss？)
|
||||
[00:51.975]忘れたくないこと
|
||||
[00:37.728]もういっぱいあるけど「尽管已经拥有了很多」
|
||||
[00:43.372]もう一つ増やしましょう「但让我们再多加一个吧」
|
||||
[00:47.700](Can you give me one last kiss？)「(可以给我最后一个吻吗?)」
|
||||
[00:51.975]忘れたくないこと「我不愿遗忘」
|
||||
[00:54.407]
|
||||
[00:54.809]Oh oh oh oh oh…
|
||||
[01:00.578]忘れたくないこと
|
||||
[01:00.578]忘れたくないこと「我不愿遗忘」
|
||||
[01:03.356]Oh oh oh oh oh…
|
||||
[01:09.181]I love you more than you'll ever know
|
||||
[01:09.181]I love you more than you'll ever know「我比你想象中更爱你」
|
||||
[01:12.591]
|
||||
[01:20.498]「写真は苦手なんだ」
|
||||
[01:22.381]でもそんなものはいらないわ
|
||||
[01:24.745]あなたが焼きついたまま
|
||||
[01:26.677]私の心のプロジェクター
|
||||
[01:28.996]寂しくないふりしてた
|
||||
[01:30.812]まあ、そんなのお互い様か
|
||||
[01:33.243]誰かを求めることは
|
||||
[01:35.107]即ち傷つくことだった
|
||||
[01:20.498]「写真は苦手なんだ」「“我不擅长摄影”」
|
||||
[01:22.381]でもそんなものはいらないわ「但我并不需要那种东西」
|
||||
[01:24.745]あなたが焼きついたまま「在我内心的投影仪中」
|
||||
[01:26.677]私の心のプロジェクター「早已将你的身影深深烙印」
|
||||
[01:28.996]寂しくないふりしてた「一直以来我都在假装不寂寞」
|
||||
[01:30.812]まあ、そんなのお互い様か「但其实 在这方面我们都一样」
|
||||
[01:33.243]誰かを求めることは「对某个人的渴望」
|
||||
[01:35.107]即ち傷つくことだった「说到底就是一种伤」
|
||||
[01:37.381]
|
||||
[01:37.796]Oh, can you give me one last kiss？
|
||||
[01:43.364]燃えるようなキスをしよう
|
||||
[01:47.611]忘れたくても
|
||||
[01:51.927]忘れられないほど
|
||||
[01:37.796]Oh, can you give me one last kiss？「可以给我最后一个吻吗?」
|
||||
[01:43.364]燃えるようなキスをしよう「如火焰燃烧般热烈拥吻吧」
|
||||
[01:47.611]忘れたくても「让这个吻铭心镂骨」
|
||||
[01:51.927]忘れられないほど「永远无法忘怀」
|
||||
[01:54.379]
|
||||
[01:54.809]Oh oh oh oh oh…
|
||||
[02:00.643]I love you more than you'll ever know
|
||||
[02:00.643]I love you more than you'll ever know「我比你想象中更爱你」
|
||||
[02:03.272]Oh oh oh oh oh…
|
||||
[02:09.161]I love you more than you'll ever know
|
||||
[02:09.161]I love you more than you'll ever know「我比你想象中更爱你」
|
||||
[02:12.394]
|
||||
[02:29.060]もう分かっているよ
|
||||
[02:34.761]この世の終わりでも
|
||||
[02:39.113]年をとっても
|
||||
[02:45.707]忘れられない人
|
||||
[02:29.060]もう分かっているよ「我已经彻底明白」
|
||||
[02:34.761]この世の終わりでも「即使这世界终结」
|
||||
[02:39.113]年をとっても「即使年华老去」
|
||||
[02:45.707]忘れられない人「无法忘记的人」
|
||||
[02:47.617]
|
||||
[02:47.964]Oh oh oh oh oh…
|
||||
[02:49.953]忘れられない人
|
||||
[02:49.953]忘れられない人「无法忘记的人」
|
||||
[02:58.990]Oh oh oh oh oh…
|
||||
[03:00.809]I love you more than you'll ever know
|
||||
[03:00.809]I love you more than you'll ever know「我比你想象中更爱你」
|
||||
[03:03.760]Oh oh oh oh oh…
|
||||
[03:09.242]忘れられない人
|
||||
[03:09.242]忘れられない人「无法忘记的人」
|
||||
[03:12.367]Oh oh oh oh oh…
|
||||
[03:17.854]I love you more than you'll ever know
|
||||
[03:17.854]I love you more than you'll ever know「我比你想象中更爱你」
|
||||
[03:20.604]
|
||||
[03:46.026]吹いていった風の後を
|
||||
[03:50.237]追いかけた 眩しい午後
|
||||
[03:46.026]吹いていった風の後を「追随着风的轨迹」
|
||||
[03:50.237]追いかけた 眩しい午後「在那耀眼的午后」
|
||||
[03:55.411]
|
||||
|
||||
Reference in New Issue
Block a user