帖子 《碧瑶 - 小池塘》使用了两个JS资源：其一，立体球播放控制器 3dball.js，其二，更改过的独立lrc歌词同步 lrc_only.js。两个资源的封装，均对帖子有相关约定，主要是：① 需要提供帖子容器id，lrc_only 要求id带 # 号并用小角引号包裹，3dball.js 不用引号、不带 # 号；② 音频 audio 标签要求 id="aud"；③ 3dball.js 要求帖子内要有 canvas画布 标签，id有否不论，画布的宽高尺寸最好一致（若不一致，脚本会依据短边尺寸将画布更改为正方形）；④ 3dball 接管了对音、视频以及CSS动画播放暂停的控制，帖子中的视频无需id，CSS动画需要在 animation 属性中附上 var(--state) 作为交互接口。资源的引用与配置方法如下：
<script>
//3dball.js放后面
var files = [
'https://638183.freep.cn/638183/web/js2024/lrc_only.js',
'https://638183.freep.cn/638183/web/js2024/3dball.js'
];
files.forEach((_, key) => {
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = files[key];
document.body.appendChild(sF);
sF.onload = () => {
if(key === 0) {
LRC({
papa: '#tiezi',
lrc_css: 'top: 10px;',
lrcAr: geci
});
}
else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
};
});
var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(144,238,144,.6)'};
let geci = [[2,"碧瑶 - 小池塘", 6],[16.03,"……",1.0],[140.04,"乐洋洋",1.4]];
</script>
首先，将两个JS文件地址装入数组 files 中（代码在 3~6 行），顺序有讲究，3dball.js 放在后面。接着，遍历数组 files 并依次加载资源文件，加载 lrc_only.js 时在其 onload 事件中配置歌词同步插件的相关参数（详情稍后附上），加载 3dball.js 时在其 onload 事件中写入帖子其他驱动事件（本实例是图片点击控制音乐播放暂停事件，这是额外附加的多个音频播放控制器）。这部分代码在 7~22 行。最后，给出 3dball.js 所需的 lz 对象配置（代码 24 行）和 lrc_only.js 需要的歌词数组（代码 25 行）；其中，lz 对象配置单独说明如下：
① papa: tiezi, - 指定帖子元素id，tiezi 是本例的id名称，不带#号不要引号
② total: 350, - 定义立体球粒子总数，多少合适视画布尺寸、粒子半径而定
③ r: 4, - 设置粒子半径，建议取值范围 1~10
④ color: 'rgba(144,238,144,.6)' - 设定粒子颜色，使用随机颜色可用空值或删掉color参数
lrc歌词同步主要参数配置说明也一并奉上：
① papa: '#tiezi', - 指定帖子元素id，tiezi 是本例的id名称，这里需要带#号并用小角引号包裹起来
② lrc_css: 'top: 10px;', - 设置歌词UI界面相关，请使用CSS语法编写，一般应该包含歌词的显示位置 left 和 top 等CSS属性。歌词底色设置请使用 color 属性，例如，color: gray; 表示歌词的底色使用灰色；设置同步歌词颜色请使用CSS变量 --bg 用来，例如，--bg: pink; 表示同步歌词颜色是粉红色
③ lrcAr: geci, - 指定歌词数组名称，geci 来源于实例代码在 25 行中的声明
【附】小池塘帖子完整代码
<style>
#tiezi { margin: 20px auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/pool.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#tiezi > canvas:nth-of-type(1) { position: absolute; top: 180px; cursor: pointer; }
#tiezi > video:nth-of-type(1) { position: absolute; right: -350px; top: 0; width: 100%; height: 40%; transform: rotate(30deg);
mix-blend-mode: multiply; }
#tiezi > img:nth-of-type(1) { position: absolute; bottom: 20px; width: 200px; cursor: pointer; user-select: none; transform-origin: 50% 100%; animation: swear linear .25s infinite alternate var(--state); }
@keyframes swear { from { transform: skewY(5deg); } to { transform: skewY(-5deg); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1870859270" autoplay></audio>
<img id="mypic" src="https://638183.freep.cn/638183/t24/2/g1.png" alt="" />
<video src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" loop muted></video>
<canvas width="180" height="180"></canvas>
</div>
<script>
//3dball.js放后面
var files = [
'https://638183.freep.cn/638183/web/js2024/lrc_only.js',
'https://638183.freep.cn/638183/web/js2024/3dball.js'
];
files.forEach((_, key) => {
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = files[key];
document.body.appendChild(sF);
sF.onload = () => {
if(key === 0) {
LRC({
papa: '#tiezi',
lrc_css: 'top: 10px;',
lrcAr: geci
});
}
else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
};
});
var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(144,238,144,.6)'};
let geci = [[2,"碧瑶 - 小池塘", 6],[12.03,"我家庭院",1.0],[13.06,"前面有个",1.0],[14.1,"小池塘",1.9],[16.03,"香水芙蓉",1.0],[17.07,"还有睡莲",1.9],[19,"水上躺",1.0],[20.04,"他们穿",1.0],[21.08,"红橙黄蓝",1.9],[23.01,"的衣裳",1.0],[24.04,"五彩缤纷",1.0],[25.08,"随波绽放",1.9],[27.01,"乐洋洋",1.2],[34,"我家庭院",1.0],[35.02,"前面有个",1.0],[36.06,"小池塘",1.0],[37.09,"池塘里面",1.9],[39.03,"住着许多",1.0],[40.06,"小鱼呀",1.0],[41.09,"他们穿",1.9],[43.03,"红橙黄蓝",1.0],[44.07,"的衣裳",1.9],[46,"五彩缤纷",1.0],[47.03,"游来游去",1.0],[48.07,"乐洋洋",2.0],[71.08,"我家庭院",1.0],[72.1,"前面有个",1.9],[74.03,"小池塘",1.0],[75.07,"池塘里面",1.9],[77,"住着许多",1.0],[78.04,"小鱼呀",1.0],[79.08,"他们穿",1.9],[81.01,"红橙黄蓝",1.0],[82.05,"的衣裳",1.0],[83.08,"五彩缤纷",1.9],[85.01,"游来游去",1.0],[86.04,"乐洋洋",1.4],[109.05,"我家庭院",1.0],[110.08,"前面有个",1.9],[112.01,"小池塘",1.0],[113.05,"香水芙蓉",1.0],[114.08,"还有睡莲",1.9],[116.01,"水上躺",1.0],[117.05,"他们穿",1.0],[118.09,"红橙黄蓝",1.9],[120.02,"的衣裳",1.0],[121.05,"五彩缤纷",1.0],[122.09,"随波绽放",1.9],[124.02,"乐洋洋",1.0],[125.06,"我家庭院",1.0],[126.09,"前面有个",1.9],[128.03,"小池塘",1.0],[129.06,"池塘里面",1.0],[130.1,"住着许多",1.9],[132.03,"小鱼呀",1.0],[133.07,"他们穿",1.9],[135,"红橙黄蓝",1.0],[136.04,"的衣裳",1.0],[137.07,"五彩缤纷",1.9],[139,"游来游去",1.0],[140.04,"乐洋洋",1.4]];
</script>
