醉美水芙蓉 发表于 2026-5-8 22:22:53

梦江南《一路花开》

<style>
#outframe        {
        width:810px;height:600px;position: relative;box-shadow:-4px 4px 10px black; margin: 50px auto 30px calc(50% - 405px);
        overflow:hidden;border-radius:10%;background-color:hsl(60, 5%, 85%);}
.lrcShow {
font: bold 2em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
bottom: -20px;
left:20%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 2px;
}
.sChar {
        // display: block;
        display: inline-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;
        }
}
#showSVG        {width:810px;height:550px;position:relative;}
</style>
<div id="outframe">
        <div id="showSVG">        </div>
        <div class="lrcShow" ></div>
        <div id="controlBox" style="position:absolute;bottom:0px;right:30px;z-index:199;width:60px;height:60px;visibility:hidden;">
                <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>
</div>       
<script>
const        pics = [
"https://pan.suyanw.cn/view.php/4c42bede728e8356d3e8ae1073f75f3f.jpg",
"https://pan.suyanw.cn/view.php/297396967e44228bcf4e1fe7c5f0a1fd.jpg",
"https://pan.suyanw.cn/view.php/2754d8d72618e615894470f15b826691.jpg",
"https://pan.suyanw.cn/view.php/c0c1631bbdf1f18d909cad71cd25ae2d.jpg",
"https://pan.suyanw.cn/view.php/830eff4ab96b71bb1dfd9b5728dc95b8.jpg",
"https://pan.suyanw.cn/view.php/f088f31498cb3fe503b33b7704e1e84f.jpg",
"https://pan.suyanw.cn/view.php/763f21eea9d636362cb64dbe05773ab5.jpg",
"https://pan.suyanw.cn/view.php/29881c7ffea56d52b303b7ebe3bb7c6e.jpg",
"https://pan.suyanw.cn/view.php/196272fe93ca14d058c3a97f3671c995.jpg",
"https://pan.suyanw.cn/view.php/2530d64b55a3f4b085c006b91e1f431c.jpg",
"https://pan.suyanw.cn/view.php/a3149dfa294213f5dd27b8e06ff9696f.jpg",
"https://pan.suyanw.cn/view.php/209b1388b982ff6fb914ea406baa40b3.jpg",
"https://pan.suyanw.cn/view.php/72f6b7c9637d72b59ae13941f2e6fbfb.jpg",
"https://pan.suyanw.cn/view.php/e2f3f9befff056876d0c3ab920cc8125.jpg",
"https://pan.suyanw.cn/view.php/15a0e20788fabc42cc9cd62d12a698fc.jpg",
"https://pan.suyanw.cn/view.php/b53e75137215f4cabe416a09e2957bd1.jpg",
"https://pan.suyanw.cn/view.php/e6c811cd08d549ea1754043b8aa8696e.jpg",
"https://pan.suyanw.cn/view.php/c25154d2a0920aed2854adcaf782f088.jpg",
"https://pan.suyanw.cn/view.php/cf09a51e4597968f30cb5203cdc0984a.jpg",
"https://pan.suyanw.cn/view.php/4fffb94c56cab23c54d36ca02b9bf950.jpg",
"https://pan.suyanw.cn/view.php/42fb6e85aaa6b56e374876267299f63e.jpg",
"https://pan.suyanw.cn/view.php/0fd167b5b2b282b4f1e93ef2a500043a.jpg",
"https://pan.suyanw.cn/view.php/d03d97d88b27005dc37eb2ae26bafb2f.jpg",
"https://pan.suyanw.cn/view.php/bee6ec09b598fef938af313d1e19f135.jpg",
"https://pan.suyanw.cn/view.php/1df5d21eaa8e5c17e1c2765ea063c3e1.jpg",
"https://pan.suyanw.cn/view.php/6af0a2fa294b67590cc6961ee290b7f1.jpg",
"https://pan.suyanw.cn/view.php/a5fed34913b842b723773dea100f2bea.jpg",

];
/**
var sf = document.createElement('script');
sf.type = 'text/javascript';
//sf.src = "script/genSvgClass.js";
//sf.src = "script/lrcPlayerSvgMaker.js";
sf.src="https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js";
sf.charset = "utf-8";
document.body.appendChild(sf);
***/
const loadJs = (url, callback) => {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

const genAniPic = () => {
        let picArr = [], errCount = 0;

        let getPictureSize = (url,pIdx) => {
                let img = new Image();
                img.onerror = () => {
                        console.log(url+" 图片加载失败，请检查url是否正确");
                        errCount++;
                };

                img.onload = () =>        {
                        picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
                        img.onload=null;//避免重复加载
                       
                }
                img.src = url;
        }
        let dataReady = ()=> {
                if(picArr.length != (pics.length - errCount))        setTimeout(dataReady,50);
                else        {
                        picArr.sort(function(a, b) {
                                return (a.index - b.index);
                        });

                        let opts = {width:showSVG.offsetWidth, height:showSVG.offsetHeight , showObj: showSVG, picAr: picArr};

                        new mkSVGPics(opts).makeSVGsegment();
                        outframe.addEventListener("mouseleave", () => {
                                svgObj.unpauseAnimations();
                                controlBox.style.visibility = "hidden";
                        });
                        outframe.addEventListener("mouseenter", () => {
                                svgObj.pauseAnimations();
                                controlBox.style.visibility = "visible";
                        });
                }
        }
        pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
        dataReady();
}

loadJs("https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js", genAniPic);

const lrctxt = `
一路花开
        词曲：风轻云淡
        演唱：苦乐人生
        LRC歌词编辑：梦江南
        春风吹过来
        烦恼都抛开
        脚步轻轻踩
        心事不用猜
        花儿沿路开
        好运迎面来
        心有欢喜在
        笑容满心怀
        把烦恼交给春风
        愿你一路花开
        满心皆是欢喜吉祥伴常在
        把烦恼交给春风
        踏歌向未来
        吉祥伴着你我快乐跳起来
        ************
        雪山映云彩
        歌声飘天外
        舞步多自在
        烦恼都散开
        岁月多慷慨
        温柔入心怀
        一路花盛开
        喜乐常安排
        把烦恼交给春风
        愿你一路花开
        满心皆是欢喜
        吉祥伴常在
        把烦恼交给春风
        踏歌向未来
        吉祥伴着你我快乐跳起来
        咿一路花开满心欢喜
        吉祥如意岁岁平安
`;
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";
const opts = {
    lrcTxt:lrctxt,
        audioURL:"https://pan.suyanw.cn/view.php/1c027791d18c9f173e9729dd10975eeb.mp3",
        //canvas:cvs
}
/**
var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
//sf1.src = "https://cccimg.com/down.php/5a22fae8e3c882e53f8d677698997e43.js";
sf1.src = "https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js";
//sf1.src = "script/lrcPlayerFrgD.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
**/
const genLrcPlayer = () => {


        let lrcPlayer = new lrcPlayerFrg(opts);

        const musicObj = lrcPlayer.getAudObj();
       
        const pState = () =>        {
                musicObj.paused ? (playCtrl.setAttribute('d', playPath)): (playCtrl.setAttribute('d', pausePath));
        };
       
        controlBox.onclick = () =>        {
                                if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
                                        lrcPlayer.getAudContext().resume();
                                }
                                if (musicObj.paused) {
                                        musicObj.play();
                                } else {
                                        musicObj.pause();
                                }
        }
        //musicObj.addEventListener("timeupdate", () => {
        //        myRange.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
        //})
        musicObj.addEventListener('play', () => pState());
        musicObj.addEventListener('pause', () => pState());
       
        musicObj.play().catch(_ = () => pState());
}
loadJs("https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js", genLrcPlayer);

</script>

klxf 发表于 2026-5-9 12:24:41

好听好看~谢谢友友精彩分享

灵山莲 发表于 2026-5-9 19:20:52

欣赏佳作！

醉美水芙蓉 发表于 2026-5-10 07:02:49

klxf 发表于 2026-5-9 12:24
好听好看~谢谢友友精彩分享

谢谢友友支持！

醉美水芙蓉 发表于 2026-5-10 07:03:29

灵山莲 发表于 2026-5-9 19:20
欣赏佳作！

谢谢老师光临！
页: [1]
查看完整版本: 梦江南《一路花开》