一、约定

请使用 audio 标签加载音乐，并给该标签一个名为 aud 的 id :

<audio id="aud" src="音乐地址" autoplay loop></audio>

并且，需要一个宿主元素安置插件界面，详情请查阅本文插件参数配置章节。

二、加载插件

（一）完美支持JS运行的环境：

<script src="插件地址"></script>

（二）一些像 Discuz! 之类的论坛环境，虽开启有JS支持功能，但不支持直接引用第三方 JS 文件，可以通过追加方式加载插件：

let script = document.createElement('script');
script.src = '插件地址';
document.head.appendChild(script);

本法，配置插件要写在 window.onload 代码块中：

window.onload = () => {
/* 插件配置代码 */
}

三、插件参数配置

（一）通用配置语句结构

HCPlayer({
    papa: '#mybox',
    lrcAr: 歌词数组或数组变量,
    lrc_css: 'CSS语句',
    player_css: 'CSS语句',
    /* 其他可能的参数 */
});

其中：

① papa 是必选参数，告知插件包含播放控制器和lrc同步歌词的播放器组件应安插在什么元素之下。例如，你有一个 id="mybox" 或 class="mybox" 的 HTML 标签并希望在这个标签上展现你的内容，则请使用对应的 CSS 选择器名称做 papa 的键值：

    papa: '#mybox', 或 papa: '.mybox',

注意，使用 class 名称做 papa 的键值时，插件只对第一个出现的 class=".mybox" 的标签有效。

② lrcAr 为可选参数，歌词数组是一个花潮格式的二维数组，结构为：

    let geci = [
        [2,"詹雯婷 - 荒羽",16.0],
        [18.03,"作词：羊炯秋 作曲：文颖秋",5.0],
        /* ... */,
        [206.01,"盛世的画卷 倒映未完的诗篇",4.2]
    ]

如上面例子所示，可以声明一个歌词数组变量 geci 或其他名字，然后用该变量做 lrcAr 的键值：

    lrcAr: geci,

当然，如果不需要歌词同步（例如纯音乐页面），可以将 lrcAr 用来显示标题之类的东东，这时可以直接这么给出 lrcAr 的键值：

    lrcAr: [ [1,"标题 Title",10] ],

[附] lrc歌词制作 ：花潮LRC歌词在线制作

③ lrc_css 为可选参数，基于歌词同步的定位和ui设置，使用CSS 标准语法，全部语句写在小角单或双引号（单行书写）或反引号（多行书写）中。该参数可通过CSS属性定义：

    其一，位置：left 和 right、top 和 bottom 两两配对；
    其二，颜色。其中，color 表示歌词底色，--bg 表示同步颜色，后者支持纯颜色、背景渐变等颜色表达方法。

④ player_css 为可选参数，基于播放器界面设置，书写规范同 ③ lrc_css，也是通过CSS属性定义相应内容：

    其一，位置，方法同 ③；
    其二，颜色。若有文本，color 属性用于前景色设置；若有进度条，则CSS变量 --track: grya; 表示进度条底轨颜色是灰色，--prog: red; 表示进度轨道颜色是红色。或许，不同的插件，还有其他的CSS变量可以设定。

⑤ 其他可能的参数属可选参数，详见具体插件。

（二）具体插件配置举例及相关说明

配置前假设已经声明了一个歌词数组，变量名为 lrcAr ：

let lrcAr = [ [2,"歌词",3],/* ... 这里很多歌词 ... */[5,"歌词",8.16] ];

下面以带进度条的频谱为例给出配置实例：

HCPlayer({
    papa: '#mydiv',
    lrcAr: lrcAr,
    lrc_css: 'right: 15px; top: 10px; --bg: linear-gradient(orange,red);',
    player_css: 'right: 15px; bottom: 10px; --track: #eee; --prog: red; --cap: silver;',
    pinpu: {num: 100, width: 3, height: 160, color: 'linear-gradient(to top, orange, red)'}
});

参数 ④ ：player_css 有一个 --cap 变量，设置频谱帽颜色；
参数 ⑤ ：pinpu 以对象形式设定，其一，num，频谱条总数，其二，width，频谱条宽度，其三，height，频谱条高度，键值均为纯数字；color 属性为频谱条颜色，支持纯颜色和渐变，若无此键值对，插件使用随机颜色，每一条拥有各自的颜色。

如果不希望一行写太多的代码，长语句可以用反引号组织起来，这样上面的配置就可以分行写，pinpu 对象也可以分行写，但不要添加反引号：

HCPlayer({
    papa: '#mydiv',
    lrcAr: lrcAr,
    lrc_css: `
        right: 15px;
        top: 10px;
        --bg: linear-gradient(orange,red);
    `,
    player_css:'
        right: 15px;
        bottom: 10px;
        --track: #eee;
        --prog: red;
        --cap: silver;
    ',
    pinpu: {
        num: 100,
        width: 3,
        height: 160,
        color: 'linear-gradient(to top, orange, red)'
    }
});

其他配置实例将陆续推出，敬请关注。

前一篇: 没有了
下一篇: 圆环进度条播放器配置举例