亦是金 发表于 2026-2-8 11:41

《你不该闯入我心中》 - 袁小袁 （再学习也曾年轻老师播放器代码）

本帖最后由 亦是金 于 2026-2-8 11:44 编辑 <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 3.0em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
top: 88%;
left:30%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 0px;
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% - 781px);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:50px;width:60px;z-index:100;visibility:hidden;//播放按钮}
        #canvas        {position:absolute; left:.1%; top:-1px;transform:scale(1.0);transform: rotateX(180deg);z-index:100;//频谱}
#dprg        {width:60%;appearance: none;height:6px; 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://video-qn.51miz.com/preview/video/00/00/67/01/V-670115-94243A06.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>

<div style="position: relative;width: 500px;height: 50px;top:-80px;LEFT: 800px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></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/6c/c3/f0/ad5b43a9ff5c0ca6a174d4e7ac3f701e/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-8 11:53

老师新发明了，把频谱放到左上角去了。欣赏点赞！{:4_187:}

亦是金 发表于 2026-2-8 12:07

梦江南 发表于 2026-2-8 11:53
老师新发明了，把频谱放到左上角去了。欣赏点赞！

问好老师！谢谢欣赏夸奖！{:4_187:}

也曾年轻 发表于 2026-2-8 12:38

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

亦是金 发表于 2026-2-8 13:11

本帖最后由 亦是金 于 2026-2-8 17:00 编辑

也曾年轻 发表于 2026-2-8 12:38

@也曾年轻   问好老师!谢谢你的代码！不知如何修改代码，使得频谱的宽度填满背景，高度保存现在的高度。请老师指点！谢谢了！{:4_180:}

红影 发表于 2026-2-8 13:55

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

梦油 发表于 2026-2-8 14:15

欣赏佳作、问候亦是金。

亦是金 发表于 2026-2-8 16:57

红影 发表于 2026-2-8 13:55
好漂亮的制作，欣赏亦是金老师好帖

问好红影！谢谢欣赏点赞！{:4_187:}

亦是金 发表于 2026-2-8 16:57

梦油 发表于 2026-2-8 14:15
欣赏佳作、问候亦是金。

问好梦油老师！谢谢欣赏点赞！{:4_180:}

也曾年轻 发表于 2026-2-8 18:41

亦是金 发表于 2026-2-8 13:11
@也曾年轻   问好老师!谢谢你的代码！不知如何修改代码，使得频谱的宽度填满背景，高度保存现在的高度。 ...

代码修改了一下，不知是否满足您的要求
<meta charset="utf-8">
<meta name="referrer" content="never" />
<style>
.lrcShow {
font: bold 3.0em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
top: 88%;
left:30%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 0px;
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% - 781px);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:50px;width:60px;z-index:100;visibility:hidden;//播放按钮}
#canvas        {position:absolute; left:0px; top:-1px;transform:scale(1.0);transform: rotateX(180deg);z-index:100;}//频谱
#dprg        {width:60%;appearance: none;height:6px; 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://video-qn.51miz.com/preview/video/00/00/67/01/V-670115-94243A06.mp4" loop muted autoplay ></video>
        <canvas id="canvas" width='1400' 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>

<div style="position: relative;width: 500px;height: 50px;top:-80px;LEFT: 800px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></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/86abfd1a59a239a0c6f2f1d6d1897c82.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/6c/c3/f0/ad5b43a9ff5c0ca6a174d4e7ac3f701e/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>

梦油 发表于 2026-2-8 19:47

亦是金 发表于 2026-2-8 16:57
问好梦油老师！谢谢欣赏点赞！

亦是金朋友别客气。

樵歌 发表于 2026-2-8 20:10

欣赏老师佳作！{:4_174:}

霜染枫丹 发表于 2026-2-8 21:00

欣赏亦是金的佳作，祝制作快乐！！

{:4_204:}{:4_190:}{:4_199:}

亦是金 发表于 2026-2-8 23:59

也曾年轻 发表于 2026-2-8 18:41
代码修改了一下，不知是否满足您的要求

谢谢老师的指导！我去试试！{:4_180:}{:4_176:}
页: [1]
查看完整版本: 《你不该闯入我心中》 - 袁小袁 （再学习也曾年轻老师播放器代码）