马黑黑 发表于 2023-9-20 08:05

曲线进度条播放器

本帖最后由 马黑黑 于 2023-9-20 13:00 编辑

应用实例：刀郎 - 未来的底片 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

JS插件地址：https://638183.freep.cn/638183/web/api/curve_lrc.js

插件加载及配置：

      let lrcAr = [ , ]; //声明歌词数组
      let js = 'https://638183.freep.cn/638183/web/api/curve_lrc.js''; //指定插件地址

      //加载JS资源的函数 ：异步加载（用于论坛，其他环境可直接引用）
      let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
      };


      //插件配置
      loadJs(js, () => {
                HCPlayer({
                        papa: '#papa', /* 指定帖子主元素 */
                        lrcAr: lrcAr, /* 指定歌词数组 */
                        lrc_css: 'top: 20px;', /* 设定歌词位置 */
                        fs_css: 'color: #ddd; background: transparent;', /* 全屏按钮设置 */
                        /* 播放器设置↓ */
                        player_css: `
                              width: 260px;/* 播放器宽度 可省略*/
                              height: 100px; /* 播放器高度 可省略*/
                              bottom: 10px; /* 位置 */
                              --track: lightgray;/* 进度条底轨色 */
                              --prog: lightgreen; /* 进度指示颜色 */
                        `,
                        dir: 0, /* 曲线凸面朝向：0=向下，1=向上 */
                        img: {play: '', pause: ''}, /* 设定播放、暂停按钮地址，空值或无此设置表示使用插件配置 */
                });
      });



本插件已收录在 HCPlayer插件汇总 (52qingyin.cn) 中，之前访问过该网页的请硬刷新查看最新资讯。插件可能还会扩展和完善，敬请期待。

世外桃源 发表于 2023-9-20 10:46

欣赏欣赏{:4_199:}

马黑黑 发表于 2023-9-20 12:59

世外桃源 发表于 2023-9-20 10:46
欣赏欣赏

{:4_190:}

红影 发表于 2023-9-20 17:22

这个曲线进度条很别致，在特定的底图里，比直线的更漂亮呢{:4_199:}

千羽 发表于 2023-9-20 21:01

等着看精彩的作业{:4_173:}

马黑黑 发表于 2023-9-21 07:57

千羽 发表于 2023-9-20 21:01
等着看精彩的作业

{:4_190:}

红影 发表于 2023-9-22 20:27

现在出来 dir:的2和3了。

马黑黑 发表于 2023-9-22 20:46

红影 发表于 2023-9-22 20:27
现在出来 dir:的2和3了。

下一步的计划是，另做一个插件，直接自定义路径。这会有很多问题要解决，现在正在弄算法。

红影 发表于 2023-9-22 21:12

马黑黑 发表于 2023-9-22 20:46
下一步的计划是，另做一个插件，直接自定义路径。这会有很多问题要解决，现在正在弄算法。

这个感觉太难了点，无法想象呢{:4_173:}

马黑黑 发表于 2023-9-22 21:59

红影 发表于 2023-9-22 21:12
这个感觉太难了点，无法想象呢

感觉对路径还是有一定的要求，最好不要有交叉。交叉点上，进度调节是无法做判断的

红影 发表于 2023-9-22 22:42

马黑黑 发表于 2023-9-22 21:59
感觉对路径还是有一定的要求，最好不要有交叉。交叉点上，进度调节是无法做判断的

是的，交叉点上会出现相同的坐标，会混乱的。

马黑黑 发表于 2023-9-23 08:11

红影 发表于 2023-9-22 22:42
是的，交叉点上会出现相同的坐标，会混乱的。

这的确是个难题。至今也没见过较为复杂的进度条，一般多是圆、椭圆、半圆、矩形、直线之类的

红影 发表于 2023-9-26 21:40

马黑黑 发表于 2023-9-23 08:11
这的确是个难题。至今也没见过较为复杂的进度条，一般多是圆、椭圆、半圆、矩形、直线之类的

今天看到了黑黑的五角星进度条呢。

马黑黑 发表于 2023-9-26 22:45

红影 发表于 2023-9-26 21:40
今天看到了黑黑的五角星进度条呢。

这个自由定制，五角星只是这个插件的定制效果之一

红影 发表于 2023-9-27 13:32

马黑黑 发表于 2023-9-26 22:45
这个自由定制，五角星只是这个插件的定制效果之一

嗯嗯，可以画出很多想要的形状。

马黑黑 发表于 2023-9-27 18:29

红影 发表于 2023-9-27 13:32
嗯嗯，可以画出很多想要的形状。

是的

红影 发表于 2023-9-27 20:44

马黑黑 发表于 2023-9-27 18:29
是的

有很大的自由度。

马黑黑 发表于 2023-9-27 20:54

红影 发表于 2023-9-27 20:44
有很大的自由度。

对

红影 发表于 2023-9-27 21:15

马黑黑 发表于 2023-9-27 20:54
对

感觉很好玩。

马黑黑 发表于 2023-9-27 22:20

红影 发表于 2023-9-27 21:15
感觉很好玩。

好玩多玩玩
页: [1] 2
查看完整版本: 曲线进度条播放器