文档地址：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 的地方。其他设置可以举一反三。

前一篇: HTML5+JS：拖动元素
下一篇: Wave in Dream贴子说明