你是那道光（男女对唱版）
<meta charset="utf-8"><meta name="referrer" content="never" />
<style>
.lrcShow {
font: bold 2.4em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
top: 10%;
left:10%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 2px;
z-index:10;
}
.sChar {
ddisplay: block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 0.3s var(--delay) forwards;
}
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
.stage {
mask: radial-gradient(closest-side, white 65%, transparent);
}
#oBlk {width:1300px;height:730px;position:relative;margin:80px auto 40px calc(50% - 761px);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#bjVid {width:120%;position:absolute;left:0px;bottom:0px;z-index:1;}
#controlBox {position:absolute; right:50px;bottom:20px;width:60px;z-index:100;visibility:hidden;}
#canvas {position:absolute; left:20%; bottom:30px;z-index:100;}
#dprg {width:60%;appearance: none;height:8px; overflow:hidden; border-radius: 4px;position:absolute;right:20%; bottom:15px; z-index:100;}
#dprg::-webkit-progress-value {background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#dprg::-webkit-progress-bar {background:hsla(60,40%,80%,0.5);}
#incBlk {width:12px;height:12px;overflow:hidden;border-radius:50px;background-color:brown;position:absolute; z-index:100;}
</style>
<div id="oBlk">
<video id="bjVid" src="https://img.tukuppt.com/video_show/2418175/00/07/94/5d1370055f37c.mp4" loop muted autoplay ></video>
<canvas id="canvas" width='576' height='270'></canvas>
<progress id="dprg" value='0' max="100" ></progress>
<div id="incBlk"></div>
<div id="controlBox"></div>
<divclass="lrcShow" data-lrc='你是那道光（男女对唱版）'></div>
</div>
<script>
const lrc =`
作词：田紫烟
作曲：田紫烟
编曲：招财狗
混音：BusEQ@Hot Music
录音：田紫烟、韩跑跑
封面设计：潇海
出品：腾讯音乐×飙升音乐
LRC编辑：醉美水芙蓉
生活曾被乌云遮挡
心在黑暗四处飘荡
迷茫时刻你出现了
像星芒把前路照亮
你的关怀暖如暖阳
驱散我心底的冰霜
每次鼓励给我力量
让我勇敢追逐梦想
你是那道微光照进我心房
从此世界变得不再一样
有你陪伴不再彷徨
未来旅途充满了希望
你是那道微光照进我心房
温暖着我每一个的梦乡
这份感动刻在心上
愿与你共度所有时光
你的关怀暖如暖阳
驱散我心底的冰霜
每次鼓励给我力量
让我勇敢追逐梦想
你是那道微光照进我心房
从此世界变得不再一样
有你陪伴不再彷徨
未来旅途充满了希望
你是那道微光照进我心房
温暖着我每一个的梦乡
这份感动刻在心上
愿与你共度所有时光
你是那道微光照进我心房
从此世界变得不再一样
有你陪伴不再彷徨
未来旅途充满了希望
你是那道微光照进我心房
温暖着我每一个的梦乡
这份感动刻在心上
愿与你共度所有时光
谢谢欣赏！
`;
const genTagObj = (parentNode,jsonData) => {let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
const sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = "https://cccimg.com/down.php/5a22fae8e3c882e53f8d677698997e43.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {
let playMusic = () => {
// 同步歌词播放
let opts = {
lrcTxt:lrc,
audioURL:"http://fsandroid.kugou.com/202602102020/11a7d97399d291fd257b2a44ef8e7a8a/v3/a78c35c50956d13feda1bebdce11df06/yp/full/ap1005_us0_mi336d5ebc5436534e61d16e63ddfca327_pi2_mx0_qu128_ct440100_s172591126.mp3",
canvas: canvas,
};
return new lrcPlayerFrg(opts);
}
(function() {
//-----------------------------------------------------------------------------
// 同步歌词播放
let lrcPlayer = playMusic();
const musicObj = lrcPlayer.getAudObj();
const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
const playPath = "M35 35 l30 15 -30 15 z";
let ctrlBox = genTagObj(null ,{'tag':'svg', 'viewBox':`0 0 100 100`});
let circleObj = genTagObj(ctrlBox ,{'tag':'circle', 'r':"36", 'cx':"50", 'cy':"50", 'fill':"none", 'stroke':"red", 'stroke-width':"4"});
circleObj = genTagObj(ctrlBox ,{'tag':'circle', 'r':"30", 'cx':"50", 'cy':"50", 'fill':"none", 'stroke':"red", 'stroke-width':"2"});
let pathObj = genTagObj(ctrlBox ,{'tag':'path', 'fill':"red", 'id':"playCtrl", 'd':"M35 35 l30 15 -30 15 z"});
controlBox.innerHTML = ctrlBox.outerHTML;
let pState = () => {
musicObj.paused ? (playCtrl.setAttribute('d', playPath), bjVid.pause())
: (playCtrl.setAttribute('d', pausePath), bjVid.play());
};
incBlk.style.top = (dprg.offsetTop - (incBlk.offsetHeight - dprg.offsetHeight) / 2) + 'px';
incBlk.style.left = (dprg.offsetLeft - 0.5 * incBlk.clientWidth) + 'px';
playCtrl.addEventListener('click', () => {
if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
lrcPlayer.getAudContext().resume();
}
if (musicObj.paused) {
musicObj.play();
} else {
musicObj.pause();
}
});
musicObj.addEventListener('play', () => pState());
musicObj.addEventListener('pause', () => pState());
const pblkWidth = dprg.offsetWidth
const initIndicatorLeft = incBlk.offsetLeft;
musicObj.addEventListener("timeupdate", () => {
dprg.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
incBlk.style.left = (musicObj.currentTime / musicObj.duration * pblkWidth + initIndicatorLeft) + 'px';
})
/**/
dprg.onclick = (e) => {
musicObj.currentTime = (e.offsetX / pblkWidth * dprg.max * musicObj.duration / 100);
}
/**/
oBlk.addEventListener('mouseover', () => controlBox.style.visibility='visible');
oBlk.addEventListener('mouseout', () => setTimeout(() => controlBox.style.visibility='hidden', 3000));
})();
}
</script>
谢谢醉美管理员精彩分享 klxf 发表于 2026-2-10 22:56
谢谢醉美管理员精彩分享
问候友友下午好！ 顶一个了
页:
[1]