原罪
<style>.mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/2/yrzv.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
</style>
<div class="mydiv">
<img src="https://638183.freep.cn/638183/t22/gif/xkhe.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: rotate(-20deg);" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=482395499.mp3" loop autoplay></audio>
</div>
<!--<script src="https://638183.freep.cn/638183/web/api/lineplayer_lrc.js"></script>-->
<script >
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/lineplayer_lrc.js';
document.head.appendChild(script);
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
window.onload = () => {
HCPlayer({
papa: '.mydiv',
lrcAr: lrcAr,
});
}
})();
</script>
帖子代码
<style>
.mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/2/yrzv.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
</style>
<div class="mydiv">
<img src="https://638183.freep.cn/638183/t22/gif/xkhe.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: rotate(-20deg);" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=482395499.mp3" loop autoplay></audio>
</div>
<!--<script src="https://638183.freep.cn/638183/web/api/lineplayer_lrc.js"></script>-->
<script >
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/lineplayer_lrc.js';
document.head.appendChild(script);
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
window.onload = () => {
HCPlayer({
papa: '.mydiv',
lrcAr: lrcAr,
});
}
})();
</script>
插件配置举例
HCPlayer({
papa: '.mydiv', /* 指定帖子父元素标识 */
lrcAr: lrcAr, /* lrc歌词 */
/* lrc歌词UI配置 ↓ */
lrc_css: `
top: 15px; /* 上边 */
left: 15px; /* 左边 */
color: tan; /* 歌词底色*/
--bg: green; /* 同步颜色 */
`,
/* 播放控制器UI配置 ↓ */
player_css: `
color: snow; /* 文本颜色 */
--track: tan; /* 轨迹底色 */
--prog: white; /* 进度颜色 */
/* 按钮设置 ↓ */
--btnpic: url('https://638183.freep.cn/638183/t23/btn/disc.png') no-repeat center/cover;
`,
}); 一楼帖子，代码在二楼，是简单配置：一是指定帖子父元素标识，二是指定插件所用的lrc歌词数组。其他配置不做，使用插件默认配置。
需要详细配置，可研究三楼所举的例子进行相应操作。
很多时候，配置可以灵活。比方说本帖，通过 .mydiv 设置子元素居中，歌词和播放控制器UI都水平居中，这时，如果只想调整歌词的垂直位置，可以这样：
lrc_css: `top: 400px;`;
其他不必要的就不进行配置。
又是一个上传好的封装效果的运用。这个太棒了{:4_199:} 黑黑可以把这些上传过的封装再弄个帖子集中一下呢{:4_173:} 画面很独特，歌曲也是第一次听呢，好听{:4_187:} 马老师的帖赞一个{:4_178:} 真难为了这位小朋友，费了九牛二虎的劲，这小船也没划走。{:4_173:} 欣赏老师佳作，问好！ 成则为王。 红影 发表于 2023-7-24 15:52
黑黑可以把这些上传过的封装再弄个帖子集中一下呢
上传到一定数量再说吧，而且独立出来后还得使用一段时间，看看有什么需要改进。现在不急。 红影 发表于 2023-7-24 15:52
又是一个上传好的封装效果的运用。这个太棒了
还可以的吧？ 樵歌 发表于 2023-7-24 17:27
成则为王。
败则为妻{:4_170:} 红影 发表于 2023-7-24 15:55
画面很独特，歌曲也是第一次听呢，好听
詹雯婷几乎没有人发过她的歌 梦油 发表于 2023-7-24 16:08
真难为了这位小朋友，费了九牛二虎的劲，这小船也没划走。
这和打油是一个道理：没有穷尽之时{:4_170:} 梦江南 发表于 2023-7-24 17:23
欣赏老师佳作，问好！
下午好 冬天的雨 发表于 2023-7-24 15:55
马老师的帖赞一个
谢谢无区别点赞{:4_170:} 第一次听着歌呢，好听{:4_187:} 小九 发表于 2023-7-24 18:31
第一次听着歌呢，好听
相信很多小朋友此前都木有听过