Right Here Waiting,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

klxf 发表于 2024-11-15 02:32:18

Right Here Waiting

本帖最后由 klxf 于 2024-11-17 13:39 编辑 <br /><br /><style>
#papa {
margin: 130px020pxcalc(50% - 790px);
background: url('https://pic.imgdb.cn/item/66e3241bd9c307b7e994a5dc.gif') no-repeat center/cover;
width: 1400px;
height: 760px;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
position: relative;
place-items: center;
pointer-events: none;
}
#btnFs {
position: absolute;
left: 20px
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
}
#vid1 {
position: absolute;
left:-220px;
top:-150px;
width: 130%;
height:180%;
opacity: 0.8;
mix-blend-mode: screen;
-webkit-mask: radial-gradient(circle,silver,transparent,transparent);
}
#vid2 {
position: absolute;
left:-220px;
top:-80px;
width: 130%;
height:120%;
object-fit: cover;
pointer-events: none;
mix-blend-mode:soft-light;
opacity: 0.8;
}
#vid3 {
position: absolute;
left:-20px;
top:-50px;
width: 120%;
height:120%;
opacity: 0.8;
z-index: 1;
mix-blend-mode:soft-light;
-webkit-mask: radial-gradient(circle,silver,transparent,transparent);
}
#mdiv {
top:80px;
right:80px;
width: 58px;
height: 58px;
filter: drop-shadow(0 0 1px #8A2BE2);
position: absolute;
pointer-events: auto;
animation: rot 8s linear infinite var (--state );
cursor: pointer;
pointer-events: auto;
}
#mdiv > span {
position: absolute;
left: -60%;
top: -60%;
width: 90%;
height: 90%;
background: linear-gradient(75deg,#7CFC00,#ADFF2F,#32CD32, #FFD700);
border-radius: 95% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(53px);
}
#mdiv > span:nth-of-type(1) { --deg: 0deg; }
#mdiv > span:nth-of-type(2) {--deg: 72deg;}
#mdiv > span:nth-of-type(3) { --deg: 144deg;}
#mdiv > span:nth-of-type(4) {--deg: 216deg;}
#mdiv > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }
#mdiv:hover { filter: drop-shadow(0 0 60px Gold); }
#lrc{left: 15%; top: 60%;}#lrcc {right:15%; top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#00ff00;border:0px solid black;position: absolute;font:normal 2.5em Microsoft YaHei;color:#00FF7F;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -3px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #8A2BE2;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<span id="btnFs"></span>
<div id="mdiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2419216/00/01/99/5b52e05d9cd7d.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2916847/00/17/69/5ecce43911f1f.mp4" autoplay loop muted></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" autoplay loop muted></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1457463959.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
Right Here Waiting
作词 : Richard Marx
作曲 : Richard Marx
演唱 : Music Travel Love
Oceans apart day after day<br>日复一日，汪洋将你我相隔
And I slowly go insane<br>我开始失去理智
I hear your voice on the line<br>命悬一线之时听见你的声音
But it doesn't stop the pain<br>但这无法停止痛苦
If I see you next to never<br>假设我再也没有机会见到你
How can we say forever<br>我们如何兑现一生厮守的诺言
Wherever you go<br>无论你踏足何处
Whatever you do<br>无论你想做什么
I will be right here waiting for you<br>我都会在这里静候你的归来
Whatever it takes<br>哪怕用一切做交换
Or how my heart breaks<br>又或是以心碎为结局
I will be right here waiting for you<br>我都会在此处为你守候

Oh-oh, oh-oh

I took for granted, all the times<br>我一直认为这一切理所当然
That I thought would last somehowV<br>这一切总会长久延续
I hear the laughter, I taste the tears<br>我听闻过欢笑，也饱尝泪水
But I can't get near you now<br>但我再难与你相近
Oh, can't you see it baby<br>亲爱的，你不知道这一切
You've got me going crazy<br>你让我痴迷的一切
Wherever you go<br>无论你去向何地
Whatever you do<br>无论你做出什么
I will be right here waiting for you<br>我从未停止等待
Whatever it takes<br>哪怕耗尽一生时光
Or how my heart breaks<br>或是以心碎收场
I will be right here waiting for you<br>我都不会转身离去
I wonder how we can survive<br>我想知道如何从这之中幸存
This romance<br>这般浪漫之中
But in the end if I'm with you<br>但如果我能与你厮守至终点
I'll take the chance, yeah, yeah, yeah<br>我一定会牢牢抓住机会

Oh, woah-oh, yeah-yeah

Oh, can't you see it baby<br>亲爱的，你难道不清楚吗
You've got me going crazy<br>你让我癫狂
Wherever you go<br>你想去往哪里
Whatever you do<br>你想完成什么
I will be right here waiting for you<br>我都会于此静候你的身影
Whatever it takes<br>哪怕是耗尽一切
Or how my heart breaks<br>用心碎为代价
I will be right here waiting for you<br>我也不会离你远去

Oh-oh, oh-oh
I will be right here waiting for you<br>我会在这里守候一生

Oh, woah-oh
I will be right here waiting for you<br>用尽一生，也无怨无悔

</span></div>
<script>
var mState = () => {
papa.style.setProperty('--state', ['running','paused'][+aud.paused]);aud.paused ?(vid1.pause(),vid2.pause(),vid3.pause()) :(vid1.play(), vid2.play(),vid3.play());
mdiv.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mdiv.onclick = () => aud.paused ? aud.play() : aud.pause();
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};
/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};
/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};
/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
let toMin = (val) => {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60),
                     sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>

醉美水芙蓉 发表于 6 天前

不知道怎么回事？你的小播不动？

klxf 发表于 6 天前

本帖最后由 klxf 于 2024-11-17 13:46 编辑

醉美水芙蓉发表于 2024-11-17 11:29
不知道怎么回事？你的小播不动？

请帮我看一下，问题在哪里？

页: [1]

纳兰音画网's Archiver

Right Here Waiting