论坛 › 音乐沙龙 › 《晚风1997》 - 蓝兰 （学习也曾年轻老师播放器代码）

亦是金 发表于 2026-2-7 21:21

《晚风1997》 - 蓝兰 （学习也曾年轻老师播放器代码）

本帖最后由 亦是金 于 2026-2-11 20:18 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2514099">
<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
.lrcShow {
font: bold 2.8em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
top: 5%;
left:5%;
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:1400px;height:760px;position:relative;margin:80px auto 40px calc(50% - 800px);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#bjVid        {width:100%;position:absolute;left:0px;bottom:0px;z-index:1;transform: rotateY(180deg);}
        #controlBox        {position:absolute; right:50px;bottom:20px;width:60px;z-index:100;visibility:hidden;//播放按钮}
        #canvas        {position:absolute; left:34.7%; bottom:90px;transform:scale(1.7);z-index:100;//频谱}
#dprg        {width:70%;appearance: none;height:6px; overflow:hidden; border-radius: 4px;position:absolute;right:10%; bottom:12px; 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://video-qn.51miz.com/preview/video/00/00/67/31/V-673129-81E36508.mp4" loop muted autoplay ></video>
        <canvas id="canvas" width='576' height='200'></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 =`
《晚风1997》 - 蓝兰
作词：向涵/李伦序/黄宗翔
作曲 : 胡皓波
演唱：蓝兰
歌词编辑：亦是金
。。。。。。
城市尽头
引路灯靠在黄昏的肩头
散步街口
爱人温柔相拥
风也说它
会再悄悄吹进谁的心海
是你
回眸点星光走来

我的心动因为你盛开
因为有你才能圆满

你的笑容摇曳在空中晕开
我心跳又慢了几拍
同你共渡每晚
从此不再孤单
其实有你相伴这一生
也足够浪漫
于心底呼唤
有你不再孤单
从这刻每分每秒
陪伴你换笑容灿烂
。。。。。。
城市尽头
引路灯靠在黄昏的肩头
散步街口
爱人温柔相拥
风也说它
会再悄悄吹进谁的心海
是你
回眸点星光走来

我的心动因为你盛开
因为有你才能圆满

你的笑容摇曳在空中晕开
我心跳又慢了几拍
同你共渡每晚
从此不再孤单
其实有你相伴这一生
也足够浪漫
于心底呼唤
有你不再孤单
从这刻每分每秒
陪伴你换笑容灿烂

同你共渡每晚
从此不再孤单
其实有你相伴这一生
也足够浪漫
于心底呼唤
有你不再孤单
从这刻每分每秒
陪伴你换笑容灿烂

-- 谢谢欣赏 --

`;
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-w9/audio/49/77/ed/dfe0307c8e960a7b7749c0fd27eff32d/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>
</td></tr></table>

霜染枫丹 发表于 2026-2-7 21:37

特别精致的制作，歌曲很好听，欣赏学习，周末快乐~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-2-7 21:52

https://pic.rmb.bdstatic.com/dbac42a7a06845735da0a5274c81fb2d1540.gif

红影 发表于 2026-2-7 21:56

制作漂亮，欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2026-2-7 22:15

霜染枫丹 发表于 2026-2-7 21:37
特别精致的制作，歌曲很好听，欣赏学习，周末快乐~~

问好霜染枫丹老师！谢谢欣赏点赞！{:4_187:}

亦是金 发表于 2026-2-7 22:16

也曾年轻 发表于 2026-2-7 21:52


问好老师！谢谢你的播放器代码！请指正！{:4_180:}

亦是金 发表于 2026-2-7 22:17

红影 发表于 2026-2-7 21:56
制作漂亮，欣赏亦是金老师好帖

问好红影！谢谢欣赏夸奖！{:4_187:}

查看完整版本: 《晚风1997》 - 蓝兰 （学习也曾年轻老师播放器代码）