《 老 家 》 - 沈 亚（趁热打铁再发一个小纽扣播放器）
本帖最后由 亦是金 于 2024-8-25 17:48 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860773">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">
<style>
#papa {
margin: auto;
top: -83px;
left: 0px;
width: 1200px;
height: 700px;
background: url('https://z4a.net/images/2023/10/07/104xx1.gif') center/cover no-repeat;/*'https://z4a.net/images/2023/03/27/105.gif*/
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover
#mplayer { transition: .7s; opacity: .9; }
#vid {
display: none;
top: 200px;
left: 0px;
width: 1200px;
height: 700px;
}
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before,
#mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: white;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent white;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg,hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75));
position: absolute;
top: 600px;
left: 380px;
font: bold 2.2em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
filter: inherit;
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes mov {to { transform: translate(var(--xx)); } }
@keyframes scale { to {transform: scale(1.5); } }
</style>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -390px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《 老 家 》 </span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 沈 亚</span></div>
<div style="position: relative;width: 500px;height: 50px;top:600px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="mplayer"></div>
<div id="lrc" data-lrc="★欢 迎 欣 赏★">★欢 迎 欣 赏★</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2068091626" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/45/91/6049734a101d5.mp4" loop muted autoplay></video>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, -4, ww, hh, 0, 0, ww + 530, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;
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;};
let getLrcAr = (text) => {let lrcAr = [];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) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let lrcAr = getLrcAr('《 老 家 》 - 沈 亚\n作词 : 沧 桑/沈 亚\n作曲 : 李封序\n编曲 : 刘 莎\nLRC歌词编辑：亦是金\n● ● ● ● ● ●\n目送一抹晚霞 夕阳又落下\n不知不觉滚落 腮边的两行泪花\n夜深人静时 又想起 远方的老家\n想起西河岸 那些听过的童话\n还记得那一天 村口的风好大\n吹乱了妈妈 被岁月染白的头发\n滴滴眼泪打痛 您饱经风霜的脸颊\n一声声嘱托 陪我浪迹在天涯\n今夜我又想起了 我的老家\n儿行千里母担忧 家中有人在牵挂\n这一辈子 不能忘 您对儿说过的话\n好儿女就要四海为家 独闯天下\n今夜我又想起了 我的老家\n是您用那双老手 刻画我金色的年华\n寒风细雨 轮换了 多少个春秋冬夏\n他乡明月 照亮思乡的路 梦里回家\n● ● ● ● ● ●\n还记得那一天 村口的风好大\n吹乱了妈妈 被岁月染白的头发\n滴滴眼泪打痛 您饱经风霜的脸颊\n一声声嘱托 陪我浪迹在天涯\n今夜我又想起了 我的老家\n儿行千里母担忧 家中有人在牵挂\n这一辈子 不能忘 您对儿说过的话\n好儿女就要四海为家 独闯天下\n今夜我又想起了 我的老家\n是您用那双老手 刻画我金色的年华\n寒风细雨 轮换了 多少个春秋冬夏\n他乡明月 照亮思乡的路 梦里回家\n他乡明月 照亮思乡的路 梦里回家\n -- 谢谢欣赏 --\n\n');
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
face.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
</td></tr></table> 动图和视频素材都很美，歌词同步也做得漂亮。欣赏亦是金老师好帖{:4_187:} 速度真快，又一个，这个动图做底图效果很好{:4_199:} 小辣椒欣赏加谢谢{:4_187:} 红影 发表于 2023-3-27 21:13
动图和视频素材都很美，歌词同步也做得漂亮。欣赏亦是金老师好帖
问好红影！谢谢欣赏点评！祝你欣赏愉快！{:4_187:} 小辣椒 发表于 2023-3-27 21:18
速度真快，又一个，这个动图做底图效果很好
问好小辣椒！{:4_187:} 小辣椒 发表于 2023-3-27 21:19
小辣椒欣赏加谢谢
我在这里有到家的感觉！这里有诸多良师益友！这里真好！同时我在这里得到了你的热心帮助和悉心指点！谢谢了！{:4_187:} 亦是金 发表于 2023-3-27 21:59
问好红影！谢谢欣赏点评！祝你欣赏愉快！
当视频从水波里慢慢浮出的某个瞬间，给人的感觉特别奇妙{:4_199:} 红影 发表于 2023-3-27 22:29
当视频从水波里慢慢浮出的某个瞬间，给人的感觉特别奇妙
谢谢点评！问好！{:4_187:} 歌词同步精准，画面意境增益词意。 亦是金 发表于 2023-3-27 22:35
谢谢点评！问好！
客气了，应该感谢亦是金老师带来的精美视听享受{:4_187:} 樵歌 发表于 2023-3-28 07:18
歌词同步精准，画面意境增益词意。
问好樵歌！谢谢欣赏点评！{:4_191:} 红影 发表于 2023-3-28 09:15
客气了，应该感谢亦是金老师带来的精美视听享受
问好红影！{:4_187:} 亦是金 发表于 2023-3-28 09:46
问好红影！
问好亦是金老师，做帖辛苦了{:4_187:} 亦是金 发表于 2023-3-27 22:10
我在这里有到家的感觉！这里有诸多良师益友！这里真好！同时我在这里得到了你的热心帮助和悉心指点！谢谢 ...
啊~~~前辈你客气了，其实你算低调的，你会的不少的，还这么谦虚。 很开心能一起玩，只是小辣椒平时比较忙，许多优秀的帖我都来不及欣赏的。
页:
[1]