当我孤独的时候还可以抱着你 - 郑源 TO：大猫咪
<style>
#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1042px;
height: 600px;
background: lightgreen url('https://pic.imgdb.cn/item/64214c3ba682492fcc7802bc.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
}
#mplayer {
position: absolute;
width: 150px;
height: 150px;
right: 200px;
top: 60%;
border-radius: 70%;
cursor: pointer;
animation: rot 8s linear infinite;
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .65));
position: absolute;
left: 40%;
transform: translate(-50%);
top: 95px;
font: bold 2.6em 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 rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="mplayer" src="https://pic.imgdb.cn/item/64214c5fa682492fcc7849e1.jpg" alt="" />
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/fc28-audiofreehighqps/29/FB/GKwRIaIH9gOIACBLhgIHLMEJ.m4a" loop autoplay></audio>
</div>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
当我孤独的时候还可以抱着你
歌手- 郑源 (Jacky)词/曲：龙军
TO：大猫咪
我以为自己应该是最寂寞的人
却忘记了身边那双温暖的眼神
再怎么寂寞又算得上什么
只要有你陪着我
我以为自己可能是最孤独的人
却忽略了心中那份美丽的温存
再怎么孤独也算不上无助
身边有你的脚步
当我孤独的时候还可以抱着你
那该有多甜蜜
当我寂寞的时候还可以想着你
那该有多幸运
当我孤独的时候就这样抱着你
一辈子不放弃
当我寂寞的时候就这样想着你
一生都只为你珍惜
TO：大猫咪
我以为自己应该是最寂寞的人
却忘记了身边那双温暖的眼神
再怎么寂寞又算得上什么
只要有你陪着我
我以为自己可能是最孤独的人
却忽略了心中那份美丽的温存
再怎么孤独也算不上无助
身边有你的脚步
当我孤独的时候还可以抱着你
那该有多甜蜜
当我寂寞的时候还可以想着你
那该有多幸运
当我孤独的时候就这样抱着你
一辈子不放弃
当我寂寞的时候就这样想着你
一生都只为你珍惜
TO：大猫咪
当我孤独的时候还可以抱着你
那该有多甜蜜
当我寂寞的时候还可以想着你
那该有多幸运
当我孤独的时候就这样抱着你
一辈子不放弃
当我寂寞的时候就这样想着你
一生都只为你 珍惜
谢谢欣赏
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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;
};
/*函数 ：处理当前歌词索引 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 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;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script> @大猫咪 猫猫过来听歌{:4_179:} 咦，准备下了还能捡个沙发 马老师的播放器，学习做一次 这个歌词还是自己做了2次{:4_170:} 冬雨自己做沙发{:4_197:} 冬雨兄想大猫兄了，兄弟大家好久不见了，是有点想了 冬雨这个做的好，@大猫咪 猫猫收礼开心 大猫兄收礼 {:4_195:} 小辣椒 发表于 2023-4-3 21:59
冬雨这个做的好，@大猫咪 猫猫收礼开心
我一方面是测试的 走过岁月 发表于 2023-4-3 21:59
冬雨兄想大猫兄了，兄弟大家好久不见了，是有点想了
岁月兄好{:4_187:} 哈哈这猫真可爱 谢谢冬雨兄弟，制作真棒！好听好看！收藏啦！
{:4_204:}{:4_174:}{:4_191:}{:4_179:} 冬天的雨 发表于 2023-4-3 22:01
我一方面是测试的
仔细看了，音乐很流畅的{:4_170:} 走过岁月 发表于 2023-4-3 22:00
大猫兄收礼
谢谢兄弟一起欣赏冬雨美帖！
{:4_204:}{:4_191:} 大猫咪 发表于 2023-4-3 22:05
哈哈这猫真可爱 谢谢冬雨兄弟，制作真棒！好听好看！收藏啦！
{:4_179: ...
猫猫来了，听歌，这首是高音质的也是我喜欢的，一起欣赏 走过岁月 发表于 2023-4-3 21:57
咦，准备下了还能捡个沙发
大家一起沙发{:4_189:} 小辣椒 发表于 2023-4-3 21:59
冬雨这个做的好，@大猫咪 猫猫收礼开心
谢谢小辣椒{:4_197:}{:4_185:} 冬天的雨 发表于 2023-4-3 22:08
谢谢小辣椒
你发帖我就晓得有原因的{:4_170:}冬雨辛苦的{:4_173:} 这是一只小奶猫，很可爱。冬雨的背景图很亮眼，音乐也好听。猫咪收礼开心哦{:4_187:}