空荡的酒杯

也曾年轻 发表于 2026-2-5 13:04

本帖最后由也曾年轻于 2026-2-6 21:11 编辑 <br /><br /><meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
.lrcShow {
font: bold 2.4em 楷体, 楷体_GB2312;
position: absolute;
width: 2em;
height: 2em;
top: 5%;
left:5%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 2px;
z-index:10;
}
.sChar {
display: 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:500px;height:897px;position:relative;margin:auto;overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#controlBox {position:absolute; right:-1%;bottom:2%;width:60px;z-index:100;visibility:hidden;}
#canvas {position:absolute; left:0%; bottom:30px;z-index:100;}
#dprg {width:100%;appearance: none;height:10px; overflow:hidden; border-radius: 4px;position:absolute;right:0%; bottom:15px; z-index:100;border:thin solid white;}
#dprg::-webkit-progress-value {background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#dprg::-webkit-progress-bar {background:hsla(60,40%,80%,0.5);}
</style>
<div id="oBlk">
<img src="https://aisearch.cdn.bcebos.com/pic_create/2026-02-05/11/43d831999b8610ca.jpg" style="z-index:50;"/>
<canvas id="canvas" width='500' height='270'></canvas>
<progress id="dprg" value='0' max="100" ></progress>
<div id="controlBox">
<svg viewBox="0 0 100 100">
<circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4"></circle>
<circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2"></circle>
<path fill="red" id="playCtrl" d="M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z"></path>
</svg>
</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/9a/9d/b7/4a0e0030e16b912b5eafe5809729ae3e/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))
: (playCtrl.setAttribute('d', pausePath));
};

controlBox.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
musicObj.addEventListener("timeupdate", () => {
dprg.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
})
oBlk.addEventListener('mouseover', () => controlBox.style.visibility='visible');
oBlk.addEventListener('mouseout', () => setTimeout(() => controlBox.style.visibility='hidden', 3000));
})();
}
</script>

梦江南 发表于 2026-2-5 14:49

发现一回帖，频谱和歌词都没有了，重新刷一下，就有了。

梦江南 发表于 2026-2-5 14:51

这歌曲很好听，图片图上的字很搭配。欣赏学习了！{:4_187:}

也曾年轻 发表于 2026-2-5 15:04

梦江南发表于 2026-2-5 14:49
发现一回帖，频谱和歌词都没有了，重新刷一下，就有了。

不知道怎么回事{:5_102:}

也曾年轻 发表于 2026-2-5 15:04

梦江南发表于 2026-2-5 14:51
这歌曲很好听，图片图上的字很搭配。欣赏学习了！

谢谢欣赏支持！

杨帆发表于 2026-2-5 16:18

好听，余音绕梁{:4_172:}

也曾年轻 发表于 2026-2-5 16:44

杨帆发表于 2026-2-5 16:18
好听，余音绕梁

https://inews.gtimg.com/om_bt/GvZs6uV9bNKDrX3ymVetdoT7GDNv_2cWg0HQMDqpdCULIAA/0

梦油发表于 2026-2-5 16:48

这是那位演小品的丫蛋吗？

也曾年轻 发表于 2026-2-5 16:57

梦油发表于 2026-2-5 16:48
这是那位演小品的丫蛋吗？

是的

霜染枫丹 发表于 2026-2-5 18:49

这首歌好听，唱的是实话，很喜欢！感谢也曾年轻的分享。{:4_204:}{:4_190:}

也曾年轻 发表于 2026-2-5 19:26

霜染枫丹发表于 2026-2-5 18:49
这首歌好听，唱的是实话，很喜欢！感谢也曾年轻的分享。

谢谢欣赏支持！

梦油发表于 2026-2-5 19:54

也曾年轻发表于 2026-2-5 16:57
是的

丫蛋唱的还不错啊、

也曾年轻 发表于 2026-2-5 20:23

梦油发表于 2026-2-5 19:54
丫蛋唱的还不错啊、

这个的丫蛋版本是最好的

小辣椒 发表于 2026-2-5 20:50

欣赏老师漂亮的频谱制作{:4_187:}

小辣椒 发表于 2026-2-5 20:51

建议老师播放器按钮再上去一点，频谱高了一点，按钮点击没有反应了，频谱低的时候可以点击停止

小辣椒 发表于 2026-2-5 20:51

建议老师播放器按钮再上去一点，频谱高了一点，按钮点击没有反应了，频谱低的时候可以点击停止

小辣椒 发表于 2026-2-5 20:51

我网卡住了，一下子回复了这么多

也曾年轻 发表于 2026-2-5 20:59

小辣椒发表于 2026-2-5 20:50
欣赏老师漂亮的频谱制作

https://inews.gtimg.com/om_bt/GvZs6uV9bNKDrX3ymVetdoT7GDNv_2cWg0HQMDqpdCULIAA/0

也曾年轻 发表于 2026-2-5 21:02

小辣椒发表于 2026-2-5 20:51
建议老师播放器按钮再上去一点，频谱高了一点，按钮点击没有反应了，频谱低的时候可以点击停止

按钮的位置不是最好的，其实放在右下角合适些，把z-index设个大些的数，频谱就不会对它有影响。

梦油发表于 2026-2-5 21:06

也曾年轻发表于 2026-2-5 20:23
这个的丫蛋版本是最好的

是啊，一个没有经过音乐专业训练的小品演员唱成这样很好了。

页: [1] 2

花潮论坛's Archiver

空荡的酒杯