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

亦是金

[i=s] 本帖最后由 亦是金 于 2026-2-8 11:44 编辑 [/i]

//频谱画布 亦是金在线音乐

梦江南

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

亦是金

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

问好老师！谢谢欣赏夸奖！

也曾年轻

                               
登录/注册后可看大图

亦是金

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

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

红影

好漂亮的制作，欣赏亦是金老师好帖

梦油

欣赏佳作、问候亦是金。

亦是金

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

问好红影！谢谢欣赏点赞！

亦是金

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

问好梦油老师！谢谢欣赏点赞！

也曾年轻

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

代码修改了一下，不知是否满足您的要求

1. <meta charset="utf-8">
   
2. <meta name="referrer" content="never" />
   
3. <style>
   
4. .lrcShow {
   
5.   font: bold 3.0em 楷体, 楷体_GB2312;
   
6.   position: absolute;
   
7.   width: 80%;
   
8.   height: 2em;
   
9.   top: 88%;
   
10.   left:30%;
    
11.   color: transparent;
    
12.   filter: drop-shadow(1px 1px 1px white);
    
13.   letter-spacing: 0px;
    
14.   z-index:10;
    
15. }
    
16. .sChar {
    
17.         ddisplay: block;
    
18.         padding: 0 2px;
    
19.         opacity: 0;
    
20.         transform: translate(var(--x), var(--y));
    
21.         animation: fadeIn 0.3s var(--delay) forwards;
    
22. }
    
23. @keyframes fadeIn {
    
24.         to {
    
25.                 transform: translate(0, 0);
    
26.                 opacity: 1;
    
27.         }
    
28. }
    
29.   .stage {
    
30.     mask: radial-gradient(closest-side, white 65%, transparent);
    
31.   }
    
32.   #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;}
    
33.   #bjVid        {width:100%;position:absolute;left:0px;bottom:0px;z-index:1;transform: rotateY(180deg);}
    
34.         #controlBox        {position:absolute; right:50px;bottom:50px;width:60px;z-index:100;visibility:hidden;//播放按钮}
    
35. #canvas        {position:absolute; left:0px; top:-1px;transform:scale(1.0);transform: rotateX(180deg);z-index:100;}//频谱
    
36.   #dprg        {width:60%;appearance: none;height:6px; overflow:hidden; border-radius: 4px;position:absolute;right:20%; bottom:15px; z-index:100;//播放进度}
    
37.   #dprg::-webkit-progress-value        {background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
    
38.   #dprg::-webkit-progress-bar        {background:hsla(60,40%,80%,0.5);}
    
39.   #incBlk        {width:12px;height:12px;overflow:hidden;border-radius:50px;background-color:brown;position:absolute; z-index:100;}
    
40. </style>
    
41. <div id="oBlk">
    
42.         <video id="bjVid" src="https://video-qn.51miz.com/preview/video/00/00/67/01/V-670115-94243A06.mp4" loop muted autoplay ></video>
    
43.         <canvas id="canvas" width='1400' height='200'></canvas>//频谱画布
    
44.         <progress id="dprg" value='0' max="100" ></progress>
    
45.                 <div id="incBlk"></div>
    
46.         <div id="controlBox"></div>
    
47.         <div  class="lrcShow" data-lrc='《你不该闯入我心中》袁小袁'></div>
    
48. </div>
    
49. 
    
50. <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)">
    
51. <p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
    
52. 
    
53. <script>
    
54. const lrc =`
    
55. [00:00.00]《你不该闯入我心中》袁小袁
    
56. [00:04.00]词：冷雪
    
57. [00:06.00]曲：梁帅
    
58. [00:08.00]演唱：袁小袁
    
59. [00:10.00]歌词编辑：亦是金
    
60. [00:13.00]。。。。。。
    
61. [00:14.89]想你的时候心疯狂地跳动
    
62. [00:21.03]你的名字还萦绕在脑海中
    
63. [00:27.49]好想你能陪我吹一吹晚风
    
64. [00:33.61]你又怎会懂我的苦衷
    
65. [00:39.94]我问天问地为何如此不公
    
66. [00:45.96]一切都是命运注定的相逢
    
67. [00:52.39]我的心痛痛无法自己掌控
    
68. [00:58.59]心在滴血眼睛已哭红
    
69. [01:04.84]你不该不该不该闯入我心中
    
70. [01:11.12]为你付出再多你也没感动
    
71. [01:17.35]爱情的梦成了一场空
    
72. [01:23.25]如今只剩下一张沧桑的面容
    
73. [01:29.84]你不该不该不该闯入我怀中
    
74. [01:36.10]爱你拼了命换来一身伤痛
    
75. [01:42.33]我很难过就快要发疯
    
76. [01:48.26]对你的痴心你为何始终不懂
    
77. [01:54.69]。。。。。。
    
78. [02:07.10]我问天问地为何如此不公
    
79. [02:13.26]一切都是命运注定的相逢
    
80. [02:19.64]我的心痛痛无法自己掌控
    
81. [02:25.84]心在滴血眼睛已哭红
    
82. [02:32.17]你不该不该不该闯入我心中
    
83. [02:38.29]为你付出再多你也没感动
    
84. [02:44.62]爱情的梦成了一场空
    
85. [02:50.58]如今只剩下一张沧桑的面容
    
86. [02:57.08]你不该不该不该闯入我怀中
    
87. [03:03.26]爱你拼了命换来一身伤痛
    
88. [03:09.55]我很难过就快要发疯
    
89. [03:15.53]对你的痴心你为何始终不懂
    
90. [03:21.89]对你的痴心你为何始终不懂
    
91. [03:28.03]
    
92. [03:30.03]-- 谢谢欣赏 --
    
93. [03:47.12]
    
94. `;
    
95. 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[key])}};if(parentNode)parentNode.appendChild(sObj);return sObj};
    
96. const sf1 = document.createElement('script');
    
97. sf1.type = 'text/javascript';
    
98. sf1.src = "https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js";
    
99. 
    
100. sf1.charset = "utf-8";
     
101. document.body.appendChild(sf1);
     
102. sf1.onload = () => {
     
103. 
     
104. 
     
105. let playMusic = () =>        {
     
106.                 //        同步歌词播放
     
107.                 let opts = {
     
108.                         lrcTxt:lrc,
     
109.                         audioURL:"https://s2.cldisk.com/sv-w8/audio/6c/c3/f0/ad5b43a9ff5c0ca6a174d4e7ac3f701e/audio.mp3",
     
110.                         canvas: canvas,
     
111.                 };
     
112.                 return new lrcPlayerFrg(opts);
     
113. 
     
114. }
     
115. (function()        {
     
116.                 //-----------------------------------------------------------------------------
     
117.                 //        同步歌词播放
     
118.                 let lrcPlayer = playMusic();
     
119.                
     
120.                 const musicObj = lrcPlayer.getAudObj();
     
121.                 const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
     
122.                 const playPath = "M35 35 l30 15 -30 15 z";
     
123.                 let ctrlBox = genTagObj(null ,{'tag':'svg', 'viewBox':`0 0 100 100`});
     
124.                 let circleObj = genTagObj(ctrlBox ,{'tag':'circle', 'r':"36", 'cx':"50", 'cy':"50", 'fill':"none", 'stroke':"red", 'stroke-width':"4"});
     
125.                 circleObj = genTagObj(ctrlBox ,{'tag':'circle', 'r':"30", 'cx':"50", 'cy':"50", 'fill':"none", 'stroke':"red", 'stroke-width':"2"});
     
126.                 let pathObj = genTagObj(ctrlBox ,{'tag':'path', 'fill':"red", 'id':"playCtrl", 'd':"M35 35 l30 15 -30 15 z"});
     
127.                 controlBox.innerHTML = ctrlBox.outerHTML;
     
128.                
     
129.                 let pState = () =>        {
     
130.                         musicObj.paused ? (playCtrl.setAttribute('d', playPath), bjVid.pause())
     
131.                                                         : (playCtrl.setAttribute('d', pausePath), bjVid.play());
     
132.                 };
     
133.                
     
134.                 incBlk.style.top = (dprg.offsetTop - (incBlk.offsetHeight - dprg.offsetHeight) / 2) + 'px';
     
135.                 incBlk.style.left = (dprg.offsetLeft - 0.5 * incBlk.clientWidth) + 'px';
     
136.   
     
137.                 playCtrl.addEventListener('click', () => {
     
138.                                 if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
     
139.                                         lrcPlayer.getAudContext().resume();
     
140.                                 }
     
141.                                 if (musicObj.paused) {
     
142.                                         musicObj.play();
     
143.                                 } else {
     
144.                                         musicObj.pause();
     
145.                                 }
     
146.                 });
     
147. 
     
148.                 musicObj.addEventListener('play', () => pState());
     
149.                 musicObj.addEventListener('pause', () => pState());
     
150.                
     
151.                 const pblkWidth = dprg.offsetWidth
     
152.                 const initIndicatorLeft = incBlk.offsetLeft;
     
153.                 musicObj.addEventListener("timeupdate", () => {
     
154.                         dprg.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
     
155.                         incBlk.style.left = (musicObj.currentTime / musicObj.duration * pblkWidth + initIndicatorLeft) + 'px';
     
156.                 })
     
157.                 /**/
     
158.                 dprg.onclick = (e) =>         {
     
159.                         musicObj.currentTime = (e.offsetX / pblkWidth * dprg.max * musicObj.duration / 100);
     
160.                 }
     
161.                 /**/
     
162.         oBlk.addEventListener('mouseover', () => controlBox.style.visibility='visible');
     
163.         oBlk.addEventListener('mouseout', () => setTimeout(() => controlBox.style.visibility='hidden', 3000));
     
164. })();
     
165. }
     
166. </script>

复制代码

梦油

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

亦是金朋友别客气。

樵歌

欣赏老师佳作！

霜染枫丹

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

亦是金

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

谢谢老师的指导！我去试试！