醉美水芙蓉 发表于 2026-2-10 20:41:25

【水芙蓉音画】你是那道光（男女对唱版）To云端漫步老师!

<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>

绿蔷薇 发表于 2026-2-10 21:12:52

芙蓉好久不见，新年快乐哈~~{:9_269:}

绿蔷薇 发表于 2026-2-10 21:13:29

{:S15:}这紫色调好浪漫，也好梦幻的说~~

绿蔷薇 发表于 2026-2-10 21:14:37

动态的加入，令图图更生动，更吸引人目光，芙蓉制作的棒棒哒~~~{:4_123:}

绿蔷薇 发表于 2026-2-10 21:15:08

一份温馨的礼物
祝漫步老师收礼开心
{:9_285:}

醉美水芙蓉 发表于 2026-2-10 22:58:24

绿蔷薇 发表于 2026-2-10 21:12
芙蓉好久不见，新年快乐哈~~

蔷薇美女好久不见！㊗️新年快乐！

念若莲 发表于 2026-2-11 10:02:45

动态图图，梦幻飘亮，歌曲好好听{:10_302:}

绿蔷薇 发表于 2026-2-11 10:49:58

醉美水芙蓉 发表于 2026-2-10 22:58
蔷薇美女好久不见！㊗️新年快乐！

是呢，芙蓉要常回家看看{:1_233:}
芙蓉马年吉祥，万事如意 ~~{:1_155:}

云淡风轻 发表于 2026-2-11 11:05:55

音画漂亮 歌曲好听{:1_154:}

醉美水芙蓉 发表于 2026-2-11 13:11:14

念若莲 发表于 2026-2-11 10:02
动态图图，梦幻飘亮，歌曲好好听

谢谢友友支持！
页: [1] 2
查看完整版本: 【水芙蓉音画】你是那道光（男女对唱版）To云端漫步老师!