晚安 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2026-5-5 21:52

晚安

马黑黑 发表于 2026-5-5 21:53

帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pic4.zhimg.com/v2-28748b998abcf9e9224aa51b3c4d710c_r.jpg') no-repeat center/cover; }
.player { width: 480px; bottom: 10px; color: lightblue; }
.btnFs { top: 20px; right: 20px; color: lightblue; }
.mypic { width: 160px; transition: .5s; opacity: var(--opacity); }
.mypic:nth-of-type(1) { top: 30px; filter: hue-rotate(60deg); }
.mypic:nth-of-type(2) { left: 100px; bottom: 200px; filter: hue-rotate(120deg); }
.mypic:nth-of-type(3) { right: 100px; bottom: 200px; filter: hue-rotate(180deg); }
#lrc { bottom: 60px; color: silver; --color1: steelblue; --color2: white; }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/1863507/00/13/38/5df20bcb2b0fd.mp4" autoplay loop muted></video>
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
<img class="mypic rot" src="https://638183.freep.cn/638183/small/780.webp" />
</div>

<script>
var geci = `啊啊啊啊啊啊~\n词/曲/唱：马丁\n你迷离的跳，红色的舞蹈\n你绽放在这，蓝色酒杯\n抚摸我的眼，那斑驳的碎片\n脑海中的你，怎么还不来\n那次海边的你，迷人的微笑\n不知过多久，能再次拥抱\n风吹过的麦田，我点燃一支烟\n当时的我们，就这样凋谢\n啊啊啊啊啊~啊啊啊啊~啊啊啊啊~\nmusic\n曾经他们说，我颜色太独特\n现在的我，不能和你在一起\n稀有的晴朗，这里的阳光\n我在思念着你，我亲爱的\n啊啊啊啊啊~啊啊啊啊啊~啊啊啊啊啊啊啊啊啊~`;

var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=137703', '晚安']],
btns: document.querySelectorAll('.mypic'),
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/web/api/yslrc.js', function() {
   const aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, geci);
});
});

function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
   if (callback) callback();
};
document.head.appendChild(script);
}
</script>

红影发表于 2026-5-5 22:07

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

马黑黑 发表于 2026-5-5 22:07

本帖：

   使用 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 源码。

马黑黑 发表于 2026-5-5 22:08

/* yslrc.js 独立歌词同步 (by Mhh, 2025-8-12)

参数:
   @param pa : 宿主元素 dom 实体 (必选)
   @param aud ：audio实体标签（必选）
   @param lrcText : 原生歌词 (必选)
   @param skip : 同步微调系数 (可选)
   @param average : 歌句用时均摊系数 (可选)

前台css设置:
   #lrc { 定位、修改前景色、字号等，可选 }
   #lrc::before { 主要设置同步颜色，可选 }

前台HTML:
   <div id="lrc" data-lrc="HC">HC</div> (可选)
*/
const cssCode = `
   #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; }
   #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); }
   @keyframes cover1 { from { width: 0%; }to { width: 100%; } }
   @keyframes cover2 { from { width: 0%; }to { width: 100%; } }
`;

function LRC(pa, aud, lrcText, skip = 0, average = 0) {
   if (pa instanceof Element === false || aud instanceof Element === false || !lrcText) return;

   let curkey = 0, lrcAr;

   let cssEl = document.getElementById('lrc-only-css');

   if (!cssEl) {
            cssEl = document.createElement('style');
            cssEl.id = 'lrc-only-css';
            cssEl.type = 'text/css';
            cssEl.textContent = cssCode;
            document.head.appendChild(cssEl);
   }

   let lrc = pa.querySelector('#lrc');

   if (!lrc) {
            lrc = document.createElement('div');
            lrc.id = 'lrc';
            lrc.textContent = lrc.dataset.lrc = 'HUACHAO LRC';
            pa.appendChild(lrc);
   }

   const lrcTime = (ar) => {
            let tmpAr = [];
            for (let j = 0; j < ar.length - 1; j ++) {
                     if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
            }
            let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) - average || 0;
            tmpAr.push(aver);
            tmpAr.forEach((item, key) => {
                     ar = item > aver ? aver : item;
            });
            return ar;
   };

   const getLrcAr = (text) => {
                     let lrc_ar = [];
               const ar = text.trim().split('\n').map(line => line.trim());
               ar.sort();
               const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
               ar.forEach(item => {
                     let result = item.match(reg);
                     let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000 + skip;
                     lrc_ar.push(.trim()]);
               });
               return (lrcTime(lrc_ar));
            };

   lrcAr = getLrcAr(lrcText);

   const showLrc = (time) => {
            const ani = window.getComputedStyle(lrc,'::before').animationName;
            const name = ani === 'cover1' ? 'cover2' : 'cover1';
            lrc.innerHTML = lrcAr;
            lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');
            lrc.style.setProperty('--motion', name);
            lrc.style.setProperty('--tt', time + 's');
            curkey += 1;
            lrc.title = lrcAr.length + '/' + curkey;
   };

   const calcKey = () => {
            for (let j = 0; j < lrcAr.length; j++) {
                     if (aud.currentTime <= lrcAr) {
                           curkey = j - 1;
                           break;
                     }
            }
            if (curkey < 0) curkey = 0;
            if (curkey > lrcAr.length - 1) curkey = lrcAr.length - 1;
            let time = lrcAr - (aud.currentTime - lrcAr);
            showLrc(time);
   };

   aud.ontimeupdate = () => {
            for (let j = 0; j < lrcAr.length; j++) {
                     if (aud.currentTime >= lrcAr) {
                           if (curkey === j) showLrc(lrcAr);
                           else continue;
                     }
            }
   };

   aud.onended = () => {
            curkey = 0;
            aud.play();
   }

   aud.onseeked = () => calcKey();
}

红影发表于 2026-5-5 22:09

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

马黑黑 发表于 2026-5-5 22:10

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

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

马黑黑 发表于 2026-5-5 22:11

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

风格有点接近赵雷

梦江南 发表于 2026-5-6 12:24

进度条也会隐去，都隐去时，背景图一片寂静。黑黑老师太厉害了！{:4_187:}

马黑黑 发表于 2026-5-6 12:25

梦江南发表于 2026-5-6 12:24
进度条也会隐去，都隐去时，背景图一片寂静。黑黑老师太厉害了！

{:4_172:}

梦江南 发表于 2026-5-6 14:53

马黑黑发表于 2026-5-6 12:25

黑黑老师下午嚎！{:4_199:}

小辣椒 发表于 2026-5-7 13:10

一个按钮联动3个按钮{:4_199:}

小辣椒 发表于 2026-5-7 13:11

发现，现在黑黑找的图也是带艺术感了{:4_199:}

马黑黑 发表于 2026-5-7 19:27

小辣椒发表于 2026-5-7 13:11
发现，现在黑黑找的图也是带艺术感了

好像俺以前没有艺术脓包一样{:4_173:}

马黑黑 发表于 2026-5-7 19:27

小辣椒发表于 2026-5-7 13:10
一个按钮联动3给按钮

{:4_181:}

多少个都行

马黑黑 发表于 2026-5-7 19:28

梦江南发表于 2026-5-6 14:53
黑黑老师下午嚎！

晚上继续嚎

小辣椒 发表于 2026-5-7 21:50

马黑黑发表于 2026-5-7 19:27
好像俺以前没有艺术脓包一样

{:4_170:}{:4_189:}{:4_196:}{:4_205:}{:4_172:}

小辣椒 发表于 2026-5-7 21:50

马黑黑发表于 2026-5-7 19:27
多少个都行

我看见三个啊

马黑黑 发表于 2026-5-8 12:42

小辣椒发表于 2026-5-7 21:50
我看见三个啊

我是说，你爱放多少个就是多少个，理论上都可以

马黑黑 发表于 2026-5-8 12:42

小辣椒发表于 2026-5-7 21:50

{:4_203:}

页: [1] 2

花潮论坛's Archiver

晚安