svg带lrc圆环播放器封装成了JS文件
本帖最后由 马黑黑 于 2023-7-23 21:49 编辑文档地址：https://638183.freep.cn/638183/web/api/circle_css.js （文档本应命名为 circle_lrc.js ，上传后才发现搞错了）
加载JS插件
可以下载文档，上传到自己的空间使用，也可以直接使用上述地址。引用方法分两种情况：
第一种情况：类似 Discuz！论坛那样的环境，不支持直接导入JS文档的：
在 JS 代码部分的前面，追加文档——
<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/circle_css.js';
document.head.appendChild(script);
//其他JS代码
</script>
第二种情况，支持直接导入JS文档的环境：
<script src="https://638183.freep.cn/638183/web/api/circle_css.js"></script>
<script>
//其他JS代码
</script>
配置插件
第一步：声明lrc歌词
lrc歌词一般都比较长，可以先声明歌词变量：
let geciAr = [
,
,
// ....
];
歌词可以写成一行。
第二步：配置插件
保险起见，请在 window.onload 事件代码块中配置插件（论坛发帖尤其需要这样做）：
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: geciAr,
lrc_css: 'left: 20px; top: 10px; color: lightyellow; --bg: linear-gradient(rgba(9,50,82,.15),rgba(9,50,82,.75));',
player_css: 'left: 20px; top: 150px; --track: rgba(255,255,224,.5); --prog: rgba(8,65,100,.8); --color: rgba(8,62,100,.7);',
});
}
配置需要关键词 HCPlayer 引导，结构为 HCPlayer({ //代码 ... }); ，配置代码总共四个选项：
① papa - 告诉插件帖子父元素，值使用小角引号包裹，值的具体内容是HTML元素对应的CSS选择器，例如上例，'#mydiv'，是组织帖子内容的父元素的 id 标识，支持 class 标识，例如，'.mybox' ，还支持自定义标签；
② lrcAr - lrc歌词数组，支持的格式是花潮lrc歌词，如上面所举例的那样。如果没有或不需要歌词，可以这么配置：
lrcAr: ,
如果事先已经声明的lrc歌词数组，则请按前面所示处理；
③ lrc_css - 配置lrc歌词位置等
使用纯CSS表达方式，所有CSS文本放在小角引号里。一般用到的有 left、top 或 right、bottom 等用于定位的属性，还有 color 属性用于设置歌词底板颜色。同时，有一个CSS变量，--bg，用来设置同步的歌词颜色，可以直接使用颜色值，也可以用渐变，还可以用图片（url）；
④ player_css - 设置圆环播放器，定位方法同 ③，CSS变量有：
--track 进度条底轨颜色
--prog 进度条轨道颜色
--color 文本和按钮颜色
【注一】
① 至 ④，① 必须配置，除非你的帖子父元素 id="papa"；
【注二】
最偷懒的配置方式是，只给出 papa 项目：
window.onload = () => {
HCPlayer({
papa: '#mydiv',
});
}
这是可以正常工作的，但是可能会发现默认设置未能达到最佳效果。这时，比方说，lrc歌词的位置要挪动一下，就加上：
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrc_css: 'left: 50%; translate(-50%); top: 30px;',
});
}
这样，lrc歌词是在水平居中的，位于上部、离上边缘 30px 的地方。其他设置可以举一反三。
示例：刀郎 - 罗刹海市
https://www.huachaowang.com/forum.php?mod=viewthread&tid=70177&extra=page%3D1 原来刀郎歌曲那个帖子是引用了封装并上传了的JS文件，怪不得看着代码很简洁{:4_199:} 记得你说过js文件不能直接引用？{:4_203:} 红影 发表于 2023-7-23 22:09
记得你说过js文件不能直接引用？
论坛不能，所以有第一种方案 红影 发表于 2023-7-23 22:07
原来刀郎歌曲那个帖子是引用了封装并上传了的JS文件，怪不得看着代码很简洁
所以，JS代码量如果大，一般都会放到一个文件里 马黑黑 发表于 2023-7-23 22:31
所以，JS代码量如果大，一般都会放到一个文件里
这倒是一个很好的办法。 马黑黑 发表于 2023-7-23 22:30
论坛不能，所以有第一种方案
厉害，黑黑总有办法去解决问题{:4_199:} 红影 发表于 2023-7-23 23:12
厉害，黑黑总有办法去解决问题
css-doodle不是这样慢慢发现的 红影 发表于 2023-7-23 23:11
这倒是一个很好的办法。
前端开发一般都这么做的 虽然没看懂，但知道是有新的解决办法{:4_190:} {:4_187:}封装的好用起来方便。 马黑黑 发表于 2023-7-23 23:25
css-doodle不是这样慢慢发现的
嗯，好像也是这样解决的。第一种情况在css-doodle中也用得较多，虽然第二种情况也能，但用得少{:4_173:} 马黑黑 发表于 2023-7-23 23:26
前端开发一般都这么做的
以前遇到使用上传好的js后，做好的帖子也要上传才能发出来，现在看起来不需要上传做好的帖子呢{:4_199:} 红影 发表于 2023-7-24 10:21
以前遇到使用上传好的js后，做好的帖子也要上传才能发出来，现在看起来不需要上传做好的帖子呢
曾经的做法是 iframe 红影 发表于 2023-7-24 10:19
嗯，好像也是这样解决的。第一种情况在css-doodle中也用得较多，虽然第二种情况也能，但用得少
第二种，直接引入法，在这里不行，必须要 appendChild 方法 花飞飞 发表于 2023-7-24 10:01
封装的好用起来方便。
会配置就好了 马黑黑 发表于 2023-7-24 13:23
曾经的做法是 iframe
其实我也稀里糊涂的，那会只是知道所有做的帖子都得上传，还满世界找上传的地方{:4_173:} 马黑黑 发表于 2023-7-24 13:24
第二种，直接引入法，在这里不行，必须要 appendChild 方法
哦 ，看样子还是要第一种才行啊。