大风在刮 大雪在下
<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:960px;height:540px;position:relative;margin:80px auto 40px calc(50% - 561px);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#bjVid {width:110%;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/2475824/00/01/80/5b4aa2b6164fe.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 =`
大风在刮大雪在下
演唱：六小乐
作词：五条悟
作曲：五条悟
编曲：阿诺瓦
大风在刮 大雪在下
我好想念他
片片的回忆是我的伤疤
等来雪花 等来泪花
我没等到他
是谁替代我和他有了家
大风在刮 大雪在下
吹散我和他
偏偏承诺啊太快就融化
想问酒杯想问雪花
我的他在哪
别在这个冬把我给丢下
熬过了风雪熬过了冬天
偏偏我熬不过这场思念
熬过了黑夜熬过了失眠
可我熬不过没你在身边
`;
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:"https://s2.cldisk.com/sv-w8/audio/e0/d4/5a/5c6491ed71c86220a28ceca83276cbc3/audio.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>
很好听的歌曲，背景选的好，很有苍茫感。欣赏佳作，立春快乐{:4_204:}{:4_190:}
好听的歌，好美的雪景，好美的频谱，欣赏学习。{:4_187:} 这歌词就是上次说的方法得来的吗？ 霜染枫丹 发表于 2026-2-4 19:15
很好听的歌曲，背景选的好，很有苍茫感。欣赏佳作，立春快乐
谢谢欣赏支持！
这些天看微信的视频很多唱这个歌的，大概算是个流行歌。 梦江南 发表于 2026-2-4 19:26
好听的歌，好美的雪景，好美的频谱，欣赏学习。
谢谢欣赏支持！ 梦江南 发表于 2026-2-4 19:33
这歌词就是上次说的方法得来的吗？
歌词在那网站随便就可以下载下来。 谢谢老师分享精美带频谱的播放器！{:4_180:}好看好听！准备套用代码，制作一个玩玩！ 亦是金 发表于 2026-2-4 20:18
谢谢老师分享精美带频谱的播放器！好看好听！准备套用代码，制作一个玩玩！
谢谢欣赏支持！
页:
[1]