求佛 歌手：施怡
<style>
#papa {
margin: 150px -215px;
width: 1280px;
height: 720px;
box-shadow: 1px 1px 0px #000;
background:lightgreenurl('https://wj.zp68.com/lxx/yunhua/2023/07/21/002.jpg')no-repeat center/cover;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#canv {
position: absolute;
display: block;
position: relative;
cursor: pointer;
z-index: 2;
}
#vid { display: none; }
#mypic {top:15%; left:10%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linearvar(--state);
--state: paused;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
.wenzi { position: absolute; left: 250px; top: 20%; z-index: 4; color: Snow; font: bold 30px/30px 'FangSong',serif;opacity: .8; }
</style>
<div id="papa">
<span id="fullscreen"></span>
<canvas id="canv"></canvas>
<video id="vid" src="https://wj.zp68.com/lxx/yunhua/2023/07/21/ship1.mp4" autoplay loop muted></video>
<img id="mypic" src="https://wj.zp68.com/lxx/yunhua/2023/07/21/142.png" alt="" />
<div class="wenzi">求佛【帖赠：撒雨】</div>
<div data-lrc="求佛歌手：施怡" id="lrc">求佛歌手：施怡</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/07/21/qh_clip.mp3" autoplay loop></audio>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 40%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #03702a;
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 -1px0);
}
#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 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
求佛歌手：施怡
施怡专辑《车上情人》
质感的律动融汇古典乐音的唯美
LRC编辑：宁静
当月光洒在我的脸上
我想我就快变了模样
有一种叫做撕心裂肺的汤
喝了它有神奇的力量
闭上眼看见天堂
那是藏着你笑的地方
我躲开无数个猎人的枪
赶走坟墓爬出的忧伤
为了你我变成狼人模样
为了你染上了疯狂
为了你穿上厚厚的伪装
为了你换了心肠
我们还能不能再见面
我在佛前苦苦求了几千年
愿意用几世换我们一世情缘
希望可以感动上天
我们还能不能能不能再见面
我在佛前苦苦求了几千年
当我在踏过这条奈何桥之前
让我再吻一吻你的脸
帖赠：撒哈拉的雨
闭上眼看见天堂
那是藏着你笑的地方
我躲开无数个猎人的枪
赶走坟墓爬出的忧伤
为了你我变成狼人模样
为了你染上了疯狂
为了你穿上厚厚的伪装
为了你换了心肠
我们还能不能再见面
我在佛前苦苦求了几千年
愿意用几世换我们一世情缘
希望可以感动上天
我们还能不能能不能再见面
我在佛前苦苦求了几千年
当我在踏过这条奈何桥之前
让我再吻一吻你的脸
我们还能不能再见面
我在佛前苦苦求了几千年
愿意用几世换我们一世情缘
希望可以感动上天
我们还能不能能不能再见面
我在佛前苦苦求了几千年
当我在踏过这条奈何桥之前
让我再吻一吻你的脸
让我再吻一吻你的脸
让我再吻一吻你的脸
`;
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;
};
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 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());
let lrcAr = getLrcAr(lrcStr);
})();
</script> @撒哈拉的雨 谢谢大哥一直以来的鼓励和支持{:10_402:} 我电脑上听不到声音啊，是我自己电脑浏览器的问题吗？其他会员都能听到歌曲声吗？ 这首求佛一直很喜欢的，男声的是誓言原唱，特别给力，悲伤有加，但好听
施怡女声柔情加忧伤，伤感歌曲都容易打动人心 愤怒の葡萄 发表于 2023-7-21 22:12
我电脑上听不到声音啊，是我自己电脑浏览器的问题吗？其他会员都能听到歌曲声吗？ ...
可以听到的
撒雨收礼开心 感谢宁静妹妹的礼物{:10_402:} 沉默 发表于 2023-7-21 23:19
撒雨收礼开心
谢谢{:9028:}