午后・时光

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

位置: 首页 > 马黑教程[ 发布时间: 2023.7.25  作者: 马黑黑  阅读: 132 ]
文档地址: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贴子说明

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com