牵牛花的泪 - 黄静美 - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2024-3-9 22:07

牵牛花的泪 - 黄静美

本帖最后由亚伦影音工作室于 2024-4-1 14:30 编辑 <br /><br /><style type="text/css">#papa {
margin: 0px 0 0 calc(50% - 693px);
width: 1164px;
height: 620px;
background: url('https://pic.imgdb.cn/item/65bf0434871b83018a3fcebd.jpg') no-repeat center/cover;
box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;
overflow: hidden;
z-index: 1;
position: relative;
}
#mplayer {z-index: 50;
position: absolute;
left: 10px;
top: 10px;
width: 160px;
height: 160px;
transition: 3s;
filter: invert(1) drop-shadow(0 0 24px yellow);
cursor: pointer;
animation: rot 5s linear infinite var(--state);
}
#mplayer:hover { filter: invert(.8) drop-shadow(0 0 24px red); }
#vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 100px);
object-fit: cover;
pointer-events: none;

}
@keyframes rot { to { transform: rotate(60deg); } }

#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:bold 2.5em 微软雅黑;color: #000078;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-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 {}
</style>
<div id="papa">
<video id="vid" loop="" muted="" src="https://imgs-qn.51miz.com/preview/video/00/00/16/48/V-164880-C8D538BC.mp4"> </video>

<audio autoplay="" id="aud" loop="" src="https://bzgz.club/view.php/6cc48ac9f1ab78f09f6b3cfb5309f2d7.mp3"> </audio>
<img alt="" id="mplayer" src="https://pic.imgdb.cn/item/65e712979f345e8d039e5ada.gif" />
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>
<script>
let timer = null;
   papa.onmousemove = function(e) {
   clearTimeout(timer);
   timer = setTimeout(function() {
         if(e.target.id === 'mplayer') return;
         let x = e.offsetX, y = e.offsetY, sw = mplayer.offsetWidth;
         if(x < 0) x = 0;
         if(x > papa.offsetWidth - sw) x =papa.offsetWidth - sw;
         if(y < 0) y = 0;
         if(y > papa.offsetHeight - sw) y = papa.offsetHeight - sw;
         mplayer.style.cssText += `left: ${x}px; top: ${y}px`;
   }, 400);
}

let mState = () => aud.paused
   ? (papa.style.setProperty('--state','paused'), vid.pause())
   : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>
<span id="lrcStr" style="visibility: hidden;">
牵牛花的泪 - 黄静美
作词：黄静美
作曲：曲多美/任夏
演唱：黄静美
编曲：雨琳诺海
吉他：赵翔
和声编写/和声：谌宥
人声编辑：迟色
混音师：浓汤宝
制作人：何文宇
制作统筹：谌宥/翊学长
艺人经济：韦耀
监制：熊磊/王腾飞
宣发：星云计划
发行人：韦琪
发行公司：万象星云
冷风轻轻吹吹醒我的伤
只剩回忆陪我流浪
落叶飘啊飘飘过了心房
却遮不住你的脸庞
大雨还在下淋湿我眼眶
模糊你曾爱我的模样
从脸红开始到眼红散场
故事太短遗憾却太长
看牵牛花的泪悄悄落在秋天
我们的爱也埋在那天
曾经说的永远最后变成敷衍
你早已经陪在她身边
看牵牛花的泪在等不到冬天
我等的你不会再出现
熬过孤单的夜却熬不过思念
枯萎的心随寒风凋谢
大雨还在下淋湿我眼眶
模糊你曾爱我的模样
从脸红开始到眼红散场
故事太短遗憾却太长
看牵牛花的泪悄悄落在秋天
我们的爱也埋在那天
曾经说的永远最后变成敷衍
你早已经陪在她身边
看牵牛花的泪在等不到冬天
我等的你不会再出现
熬过孤单的夜却熬不过思念
枯萎的心随寒风凋谢
看牵牛花的泪悄悄落在秋天
我们的爱也埋在那天
曾经说的永远最后变成敷衍
你早已经陪在她身边
看牵牛花的泪在等不到冬天
我等的你不会再出现
熬过孤单的夜却熬不过思念
枯萎的心随寒风凋谢
</span>
<script >
(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"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.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;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

亦是金 发表于 2024-3-9 22:26

欣赏美帖！好听好看！点赞学习收藏了！谢谢亚伦老师代码！{:4_180:}

红影发表于 2024-3-10 08:41

漂亮的蝴蝶播放器按钮，穿梭在美丽的花海中。
制作真漂亮。欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-3-10 17:00

欣赏老师的精美音画，点赞！

页: [1]

花潮论坛's Archiver

牵牛花的泪 - 黄静美