曲线进度条播放器

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

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

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

插件加载及配置：

      let lrcAr = [ [2, "歌词1", 3], [3, "歌词2", 1] ]; //声明歌词数组
      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) 中，之前访问过该网页的请硬刷新查看最新资讯。插件可能还会扩展和完善，敬请期待。