论坛 › 音乐沙龙 › 《等到思念也会说话》魏佳艺 （再学习也曾年轻老师播放器代码）

亦是金 发表于 2026-2-9 11:47

《等到思念也会说话》魏佳艺 （再学习也曾年轻老师播放器代码）

本帖最后由 亦是金 于 2026-2-9 11:48 编辑 <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:35%;
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(2.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/00/V-670036-1C423F2B.mp4" loop muted autoplay ></video>
        <canvas id="canvas" width='1400' height=207'></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://upfile.mp3.wf/down.php/9a22ff9215904ae202e4d9c89fea1102.txt";

sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {


let playMusic = () =>        {
                //        同步歌词播放
                let opts = {
                        lrcTxt:lrc,
                        audioURL:"https://s2.cldisk.com/sv-w8/audio/e7/09/7c/c2101ee9b3fd4754a0ee213c24e1bdfb/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', 1000));
})();
}
</script>
</td></tr></table>

亦是金 发表于 2026-2-9 11:55

@也曾年轻   老师早上好！用你新播放器代码制作了一个帖子！请你批改！{:4_180:}

梦江南 发表于 2026-2-9 12:02

欣赏老师的精彩音画，频谱又变了。{:4_199:}

红影 发表于 2026-2-9 12:25

漂亮的彩色进度条，下垂的频谱也很漂亮。
背景视频和歌曲十分相符，欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2026-2-9 12:26

梦江南 发表于 2026-2-9 12:02
欣赏老师的精彩音画，频谱又变了。

问好梦江南老师！这是套用也曾年轻老师新播放器代码制作的！{:4_180:}

梦油 发表于 2026-2-9 13:10

欣赏佳作，问候亦是金。

杨帆 发表于 2026-2-9 16:30

漂亮~谢谢亦是金老师精彩分享{:4_191:}

也曾年轻 发表于 2026-2-9 16:56

https://5b0988e595225.cdn.sohucs.com/images/20200317/b62dfef939864d54bb4bd89963da3c55.gif

亦是金 发表于 2026-2-9 17:03

红影 发表于 2026-2-9 12:25
漂亮的彩色进度条，下垂的频谱也很漂亮。
背景视频和歌曲十分相符，欣赏亦是金老师好帖

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

亦是金 发表于 2026-2-9 17:04

梦油 发表于 2026-2-9 13:10
欣赏佳作，问候亦是金。

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

亦是金 发表于 2026-2-9 17:05

杨帆 发表于 2026-2-9 16:30
漂亮~谢谢亦是金老师精彩分享

问好杨帆老师！谢谢欣赏！{:4_180:}

亦是金 发表于 2026-2-9 17:06

也曾年轻 发表于 2026-2-9 16:56


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

霜染枫丹 发表于 2026-2-9 19:37

亦是金老师的制作总是赏心悦目，欣赏赞佩！{:4_204:}{:4_190:}

梦油 发表于 2026-2-9 19:43

亦是金 发表于 2026-2-9 17:04
问好梦油老师！谢谢欣赏！

亦是金朋友别客气。

亦是金 发表于 2026-2-9 19:45

霜染枫丹 发表于 2026-2-9 19:37
亦是金老师的制作总是赏心悦目，欣赏赞佩！

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

亦是金 发表于 2026-2-9 19:46

梦油 发表于 2026-2-9 19:43
亦是金朋友别客气。

老师晚上好！{:4_180:}

小辣椒 发表于 2026-2-9 23:46

前辈这个频谱效果非常漂亮，倒频谱的效果。下面加歌词，正好{:4_178:}

亦是金 发表于 2026-2-10 19:43

小辣椒 发表于 2026-2-9 23:46
前辈这个频谱效果非常漂亮，倒频谱的效果。下面加歌词，正好

问好小辣椒！谢谢欣赏夸奖！{:4_187:}

查看完整版本: 《等到思念也会说话》魏佳艺 （再学习也曾年轻老师播放器代码）