使用 audioplayer+yslrc 制作歌词帖 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 马黑黑教程专版 › 使用 audioplayer+yslrc 制作歌词帖

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

使用 audioplayer+yslrc 制作歌词帖

<style>
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
</style>

<div class="artBox">
<h3>1️⃣ 插件及其配置</h3>
<p><strong>一、audioplayer</strong> </p>
<p>audioplayer 是一款刚定稿的音频插件，它通过一个名为 AudPlayer 的类封装了音频播放管理组件，附带可选的全屏切换、同时兼顾对视频和基于帖子主元素的CSS变量 <code>--state</code> 的同步维护，功能够用。</p>
<p>AudPlayer 需要实例化才能使用：</p>
<pre><code>var aud = new AudPlayer(options);
</code></pre>
<p>其中的 options 参数为事先设置好的配置。配置至少必须包含两个键值对设置（pa 和 urls）：</p>
<pre><code>var options = {
pa: '.pa',
urls: [
   ['歌曲地址1', '歌名1'],
   ['歌曲地址2', '歌名2'],
   ['歌曲地址N', '歌名N'],
],
};
</code></pre>
<p>pa 指明帖子主元素的 class 类名（例如 <code>'.pa'</code>）或 id（例如 <code>'#pa'</code>）。urls 是一个二维数组，子维数组存储歌曲地址和歌名。此外，可选配置还有：</p>
<pre><code>var options = {
/* ...这里是必选配置 */
fs: false, /* 禁用全屏模块 */
/* 添加参与控制音频的自定义标签实体（例如 id="pic1" 的图片标签）*/
btns: ,
};
</code></pre>
<p><strong>二、yslrc</strong></p>
<p><strong>yslrci</strong> 是去年八月编写的原生LRC歌词同步插件，本质上它只是一个函数 <code>LRC()</code>，接收三个必选参数和两个可选参数（按顺序）：</p>
<pre><code>var pa = document.querySelector('.pa');
var aud = document.querySelector('audio');
var geci = `歌句1\n歌句2\n歌句N\n`;

LRC(pa, aud, geci);
</code></pre>
<p>另外两个可选参数是数值参数，排第四位的是歌词微调时间，例如 0.5 或 -0.5，排第五位的是歌句用时均摊系数，值应为大于 0 的数值。</p>
<h3>2️⃣ 插件的引用方法：</h3>
<p><strong>一、通用方法（伪代码）</strong></p>
<pre><code><script charset="utf-8" src="https://638183.freep.cn/638183/web/api/audioplayer.min.js"></script>
<script charset="utf-8" src="https://638183.freep.cn/638183/web/api/yslrc.min.js"></script>
<script>
// ... 这里是必要的声明
const aud = new AudPlayer(options); // 实例化音频播放对象
LRC(aud.pa, aud.aud, geci); // 运行歌词同步函数
</script>
</code></pre>
<p><strong>二、discuz!论坛（伪代码）</strong></p>
<pre><code><script>
// ... 这里是必要的声明
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
   loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.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>
</code></pre>
<h3>3️⃣ 完整的实例代码：</h3>
<pre><code>
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
/* --offsetX 设置帖子偏移量，花潮使用 81px; */
.pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w8/yujb.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 { top: 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 = `余烬 - 歌手：吴炳文 / sea蕊\n出品：网易电波\n从黑夜熬到天亮\n是对谁执着\n可能也认为我\n是一团不愿散的火\n掩盖着悲欢离合痛苦失落\n但没有一次我想要示弱\n这几番纠缠中\n造就了另一个我\n我与世界形成了两个极端\n多么不堪\n我被动身处于你的对岸\n一拍即散\n像余烬燃过\n弹下烧不尽的灰\n沉默后选择了背向而行\nAGAIN\n人群是熙熙攘攘心在摇晃\n我的一败涂地一声不响\n我的离开不痛不痒\n一切都是痴心妄想\n我的心已不再完整\n怎么做到如此残忍\n面对我的热情\n你怎么能够冰冷的潇洒转身\n掩盖着悲欢离合痛苦失落\n但没有一次我想要示弱\n这几番纠缠中\n造就了另一个我\n我与世界形成了两个极端\n多么不堪\n我被动身处于你的对岸\n一拍即散\n像余烬燃过\n弹下烧不尽的灰\n沉默后选择了背向而行\nAGAIN`;

// 播放器配置
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2029909014', '余烬']],
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.min.js', function() {
   const aud = new AudPlayer(options);
   LRC(aud.pa, aud.aud, geci);
});
});

// 加载JS资源函数
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>
</code></pre>
<p>【附】可以将实例代码拿到 <a href="http://mhh.52qingyin.cn/api/pencilcode/editor.html" title="点击访问">简易Web编辑器</a> 修改、预览，也可以点击 <a href="https://mahei.ccccocccc.cc/art/?id=1778037689" title="点击查看">《余烬》</a> 直接查看效果。</p>
</div>

梦江南 发表于 2026-5-6 15:13

谢谢黑黑老师辛苦，学习了！{:4_187:}

红影发表于 2026-5-6 22:11

这个好，可以把原生歌词的设置顺便再学习一遍了，比如那个歌词微调时间我就已经忘了是怎么调的了{:4_187:}

马黑黑 发表于 2026-5-7 08:33

红影发表于 2026-5-6 22:11
这个好，可以把原生歌词的设置顺便再学习一遍了，比如那个歌词微调时间我就已经忘了是怎么调的了

加正负，正的不行负的来，反之亦然

马黑黑 发表于 2026-5-7 08:33

梦江南发表于 2026-5-6 15:13
谢谢黑黑老师辛苦，学习了！

{:4_180:}

杨帆发表于 2026-5-8 10:28

有了 audioplayer+yslrc ，制作歌词帖更便捷，谢谢马老师精彩讲授与示范{:4_191:}

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

杨帆发表于 2026-5-8 10:28
有了 audioplayer+yslrc ，制作歌词帖更便捷，谢谢马老师精彩讲授与示范

方法很多，这只是其中的一种

杨帆发表于 2026-5-8 13:27

马黑黑发表于 2026-5-8 12:36
方法很多，这只是其中的一种

是，这个方法挺好的{:4_191:}

马黑黑 发表于 2026-5-9 20:06

杨帆发表于 2026-5-8 13:27
是，这个方法挺好的

会用的都好

页: [1]

查看完整版本: 使用 audioplayer+yslrc 制作歌词帖