hc_player3in1，基于花潮格式LRC歌词同步封装的花潮音频播放器，而此前推出的 hcplayer3in1 基于原生LRC歌词同步，这是二者的区别。文件名书写上，花朝格式的有一个 _ ，原生的没有。

3in1 就是三合一：纯音、横排歌词、竖排歌词。

---------------------------------------------------------------------------

纯音：

参照本帖代码，关键在 21 行， hcplay(papa); ，函数传参只有一个 papa，帖子主元素的 id 标识；

---------------------------------------------------------------------

歌词横排：

CSS 代码中加入 #lrcDiv { ... } 属性，主要用于定位，left、top 之类的，也可以参考以前的同类插件自定义文本颜色等。

JS代码中，hcplay 函数加一个传参， hcplay(papa, geci); ，其中，geci 是花朝格式LRC歌词变量，需要实现声明该变量并给它赋值，例如下面的代码示例——

var geci = [ [1.00,"刀郎 - 罗刹海市",5.5], [14.14,"罗刹国向东两万六千里",6.0], [20.74,"...",6.1] ];

hcplay(papa, geci);

-------------------------------------------------------------------------

竖排歌词：

在横排歌词的基础上，在帖子 CSS 代码中的 #lrcDiv 加入:

#lrcDiv { writing-mode: vertical-rl; }

--------------------------------------------------------------------------

h5粒子是之前做的插件，这里已经改为了ES6模块，使用起来更方便。

首先，需要引入模块：

import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';

接着，配置粒子属性：

var lzConfig = {

papa: '#papa', /* 给出帖子元素连同 # 号的id名称 */

total: 100, /* 粒子数量 */

size: {width: 10, height: 10}, /* 粒子宽高尺寸 */

shape: {background: 'white', borderRadius: '50% 0'}, /* 粒子背景和形状 ：本行不要或引号内啥也没有的话使用默认值 */

ani: 'toBottom', /* 粒子运行方向，可选值还有 ：toTop, toRight, toLeft */

maxTime: 40, /* 粒子运动一个周期的最大秒数 */

offset: {x: -200, y: -200} /* 粒子运动偏移量 ：粒子从出发的地方到结束的地方，xy方向各自偏移多少像素 */

};

最后，运行函数，把声明的参数带上：

h5lz(lzConfig) ;

除帖子元素必须存在外，其余属性配置可以省略，这将使用模块的默认配置，所以最简单的粒子配置无需声明属性配置，如下：

h5lz({papa: '#papa'});

前一篇: 《太极》贴子说明
下一篇: 没有了