svg带lrc圆环播放器封装成了JS文件

马黑黑

文档地址：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 = [
    [1.00,"刀郎 - 罗刹海市",5.5],
    [14.14,"罗刹国向东两万六千里",6.0],
    // ....
    [272.01,"是我们人类根本的问题",8.0]
];

歌词可以写成一行。

第二步：配置插件

保险起见，请在 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: [0.2, "帖子名称", 201.12],

如果事先已经声明的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/foru ... &extra=page%3D1

红影

原来刀郎歌曲那个帖子是引用了封装并上传了的JS文件，怪不得看着代码很简洁

红影

记得你说过js文件不能直接引用？

马黑黑

红影 发表于 2023-7-23 22:09
记得你说过js文件不能直接引用？

论坛不能，所以有第一种方案

马黑黑

红影 发表于 2023-7-23 22:07
原来刀郎歌曲那个帖子是引用了封装并上传了的JS文件，怪不得看着代码很简洁

所以，JS代码量如果大，一般都会放到一个文件里

红影

马黑黑 发表于 2023-7-23 22:31
所以，JS代码量如果大，一般都会放到一个文件里

这倒是一个很好的办法。

红影

马黑黑 发表于 2023-7-23 22:30
论坛不能，所以有第一种方案

厉害，黑黑总有办法去解决问题

马黑黑

红影 发表于 2023-7-23 23:12
厉害，黑黑总有办法去解决问题

css-doodle不是这样慢慢发现的

马黑黑

红影 发表于 2023-7-23 23:11
这倒是一个很好的办法。

前端开发一般都这么做的

樵歌

虽然没看懂，但知道是有新的解决办法

花飞飞

封装的好用起来方便。

红影

马黑黑 发表于 2023-7-23 23:25
css-doodle不是这样慢慢发现的

嗯，好像也是这样解决的。第一种情况在css-doodle中也用得较多，虽然第二种情况也能，但用得少

红影

马黑黑 发表于 2023-7-23 23:26
前端开发一般都这么做的

以前遇到使用上传好的js后，做好的帖子也要上传才能发出来，现在看起来不需要上传做好的帖子呢

马黑黑

红影 发表于 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

其实我也稀里糊涂的，那会只是知道所有做的帖子都得上传，还满世界找上传的地方

红影

马黑黑 发表于 2023-7-24 13:24
第二种，直接引入法，在这里不行，必须要 appendChild 方法

哦 ，看样子还是要第一种才行啊。