晚安

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.   .pa { --offsetX: 81px; --bg: url('https://pic4.zhimg.com/v2-28748b998abcf9e9224aa51b3c4d710c_r.jpg') no-repeat center/cover; }
   
4.   .player { width: 480px; bottom: 10px; color: lightblue; }
   
5.   .btnFs { top: 20px; right: 20px; color: lightblue; }
   
6.   .mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
   
7.   .mypic:nth-of-type(1) { top: 30px; filter: hue-rotate(60deg); }
   
8.   .mypic:nth-of-type(2) { left: 100px; bottom: 200px; filter: hue-rotate(120deg); }
   
9.   .mypic:nth-of-type(3) { right: 100px; bottom: 200px; filter: hue-rotate(180deg); }
   
10.   #lrc { bottom: 60px; color: silver; --color1: steelblue; --color2: white; }
    
11. </style>
    
12. 
    
13. <div id="pa" class="pa">
    
14.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
    
15.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
16.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
17.   <img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
    
18. </div>
    
19. 
    
20. <script>
    
21.   var geci = `[00:00.490]啊啊啊啊啊啊~\n[00:22.103]词/曲/唱 ：马丁\n[00:54.490]你迷离的跳，红色的舞蹈\n[01:03.490]你绽放在这，蓝色酒杯\n[01:12.490]抚摸我的眼，那斑驳的碎片\n[01:21.490]脑海中的你，怎么还不来\n[01:30.490]那次海边的你，迷人的微笑\n[01:38.490]不知过多久，能再次拥抱\n[01:47.490]风吹过的麦田，我点燃一支烟\n[01:56.490]当时的我们，就这样凋谢\n[02:05.490]啊啊啊啊啊~啊啊啊啊~啊啊啊啊~\n[02:42.490]music\n[03:16.490]曾经他们说，我颜色太独特\n[03:25.490]现在的我，不能和你在一起\n[03:34.490]稀有的晴朗，这里的阳光\n[03:43.490]我在思念着你，我亲爱的\n[03:52.490]啊啊啊啊啊~啊啊啊啊啊~啊啊啊啊啊啊啊啊啊~`;
    
22. 
    
23.   var options = {
    
24.     pa: '.pa',
    
25.     urls: [['https://music.163.com/song/media/outer/url?id=137703', '晚安']],
    
26.     btns: document.querySelectorAll('.mypic'),
    
27.   };
    
28. 
    
29.   loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    
30.     loadJs('https://638183.freep.cn/638183/web/api/yslrc.js', function() {
    
31.       const aud = new AudPlayer(options);
    
32.       LRC(aud.pa, aud.aud, geci);
    
33.     });
    
34.   });  
    
35. 
    
36.   function loadJs(url, callback) {
    
37.     var script = document.createElement('script');
    
38.     script.charset = 'utf-8';
    
39.     script.src = url;
    
40.     script.onload = function() {
    
41.       if (callback) callback();
    
42.     };
    
43.     document.head.appendChild(script);
    
44.   }
    
45. </script>

复制代码

红影

好听的低音炮，歌词充满画面感与情绪张力，通过“红色的舞蹈”、“蓝色酒杯”、“海边的微笑”、“风吹过的麦田”等意象，描绘了思念、回忆与感伤的氛围。歌曲中大量的“啊啊啊啊”吟唱部分，增强了情感的宣泄与音乐感染力。令人陶醉的歌声

马黑黑

本帖：

        使用 audioplayer 插件 + yslrc 插件 发带LRC歌词的单曲帖

（一）audioplayer 发单曲，配置中的 urls 键值只有一个数组元素（代码第 25 行）；

（二）yslrc.js 是原生LRC歌词插件，实际上它只是一个函数，去年八月份做的（当时提供有ES模块），后面的回复会给出完整源码。调用该函数，至少需要三个参数（按顺序）：

        其一：帖子主元素 dom 实体，例如：假设帖子有 id=“xxx"，就用 xxx，也可以通过其它途径提供，例如本例的 aud.pa，aud 是 audiopalyer 实例化的对象，它有一个 pa 变量，指向帖子主元素实体标签；

        其二：audio 控件实体 dom，例如：假设帖子中有 id="myaudio" 的 audio 标签，则使用 myaudio 做传参，也可以使用其它途径提供dom实体参数，就像本例的 aud.aud，前面的 aud 是 audioplayer 的实例化对象，它带有一个 aud 实体，指向动态创建的 audio 标签；

        其三：歌词文本，即原生格式的LRC歌词字符串（歌词格式请参考代码第 21 行）。代码中的 geci 是实现声明的变量，然后用到函数中的第三个参数。

        还有另外两个可选参数，详见 yslrc.js 源码。

马黑黑

1. /* yslrc.js 独立歌词同步 (by Mhh, 2025-8-12)
   
2. 
   
3.    参数:
   
4.       @param pa : 宿主元素 dom 实体 (必选)
   
5.       @param aud ：audio实体标签（必选）
   
6.       @param lrcText : 原生歌词 (必选)
   
7.       @param skip : 同步微调系数 (可选)
   
8.       @param average : 歌句用时均摊系数 (可选)
   
9. 
   
10.    前台css设置:
    
11.       #lrc { 定位、修改前景色、字号等，可选 }
    
12.       #lrc::before { 主要设置同步颜色，可选 }
    
13. 
    
14.    前台HTML:
    
15.       <div id="lrc" data-lrc="HC">HC</div> (可选)
    
16. */
    
17. const cssCode = `
    
18.         #lrc { --motion: cover1; --tt: 1s; --color1: hsla(100,10%,50%,.75); --color2: hsla(100,100%,20%,.65); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; cursor: default; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }
    
19.         #lrc::before { position: absolute; content: attr(data-lrc); width: 0%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, var(--color1), var(--color2)); filter: inherit; background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
    
20.         @keyframes cover1 { from { width: 0%; }  to { width: 100%; } }
    
21.         @keyframes cover2 { from { width: 0%; }  to { width: 100%; } }
    
22. `;
    
23. 
    
24. function LRC(pa, aud, lrcText, skip = 0, average = 0) {
    
25.         if (pa instanceof Element === false || aud instanceof Element === false || !lrcText) return;
    
26. 
    
27.         let curkey = 0, lrcAr;
    
28. 
    
29.         let cssEl = document.getElementById('lrc-only-css');
    
30. 
    
31.         if (!cssEl) {
    
32.                 cssEl = document.createElement('style');
    
33.                 cssEl.id = 'lrc-only-css';
    
34.                 cssEl.type = 'text/css';
    
35.                 cssEl.textContent = cssCode;
    
36.                 document.head.appendChild(cssEl);
    
37.         }
    
38. 
    
39.         let lrc = pa.querySelector('#lrc');
    
40. 
    
41.         if (!lrc) {
    
42.                 lrc = document.createElement('div');
    
43.                 lrc.id = 'lrc';
    
44.                 lrc.textContent = lrc.dataset.lrc = 'HUACHAO LRC';
    
45.                 pa.appendChild(lrc);
    
46.         }
    
47. 
    
48.         const lrcTime = (ar) => {
    
49.                 let tmpAr = [];
    
50.                 for (let j = 0; j < ar.length - 1; j ++) {
    
51.                         if (j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j + 1][0] - ar[j][0]).toFixed(1));
    
52.                 }
    
53.                 let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) - average || 0;
    
54.                 tmpAr.push(aver);
    
55.                 tmpAr.forEach((item, key) => {
    
56.                         ar[key][2] = item > aver ? aver : item;
    
57.                 });
    
58.                 return ar;
    
59.         };
    
60. 
    
61.         const getLrcAr = (text) => {
    
62.                         let lrc_ar = [];
    
63.                     const ar = text.trim().split('\n').map(line => line.trim());
    
64.                     ar.sort();
    
65.                     const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    
66.                     ar.forEach(item => {
    
67.                         let result = item.match(reg);
    
68.                         let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000 + skip;
    
69.                         lrc_ar.push([tmsg, result[4].trim()]);
    
70.                     });
    
71.                     return (lrcTime(lrc_ar));
    
72.                 };
    
73. 
    
74.         lrcAr = getLrcAr(lrcText);
    
75.         
    
76.         const showLrc = (time) => {
    
77.                 const ani = window.getComputedStyle(lrc,'::before').animationName;
    
78.                 const name = ani === 'cover1' ? 'cover2' : 'cover1';
    
79.                 lrc.innerHTML = lrcAr[curkey][1];
    
80.                 lrc.dataset.lrc = lrcAr[curkey][1].replace(/<br>/, '\n');
    
81.                 lrc.style.setProperty('--motion', name);
    
82.                 lrc.style.setProperty('--tt', time + 's');
    
83.                 curkey += 1;
    
84.                 lrc.title = lrcAr.length + '/' + curkey;
    
85.         };
    
86. 
    
87.         const calcKey = () => {
    
88.                 for (let j = 0; j < lrcAr.length; j++) {
    
89.                         if (aud.currentTime <= lrcAr[j][0]) {
    
90.                                 curkey = j - 1;
    
91.                                 break;
    
92.                         }
    
93.                 }
    
94.                 if (curkey < 0) curkey = 0;
    
95.                 if (curkey > lrcAr.length - 1) curkey = lrcAr.length - 1;
    
96.                 let time = lrcAr[curkey][2] - (aud.currentTime - lrcAr[curkey][0]);
    
97.                 showLrc(time);
    
98.         };
    
99. 
    
100.         aud.ontimeupdate = () => {
     
101.                 for (let j = 0; j < lrcAr.length; j++) {
     
102.                         if (aud.currentTime >= lrcAr[j][0]) {
     
103.                                 if (curkey === j) showLrc(lrcAr[j][2]);
     
104.                                 else continue;
     
105.                         }
     
106.                 }
     
107.         };
     
108. 
     
109.         aud.onended = () => {
     
110.                 curkey = 0;
     
111.                 aud.play();
     
112.         }
     
113. 
     
114.         aud.onseeked = () => calcKey();
     
115. }

复制代码

红影

又是带三个额外小播的，这次还带歌词同步了，真棒。
欣赏黑黑好帖

马黑黑

红影 发表于 2026-5-5 22:09
又是带三个额外小播的，这次还带歌词同步了，真棒。
欣赏黑黑好帖

这个帖子主要做发单曲+歌词演示用，其他东东没做多大修改

马黑黑

红影 发表于 2026-5-5 22:07
好听的低音炮，歌词充满画面感与情绪张力，通过“红色的舞蹈”、“蓝色酒杯”、“海边的微笑”、“风吹过的 ...

风格有点接近赵雷