（二）插件参数及解释


1、lrcAr : 花潮格式歌词同步数组。配置举例：


    let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
    HCPlayer({
       lrcAr:ar,
    });


2、ypData : 歌曲波形数据（数组形式）。配置举例：


    let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
    let wave = [85,149,118,...];
    HCPlayer({
       lrcAr:ar,
        ypData: wave,
    });




3、pinpu : 频谱相关设置。使用JS对象表达方法，{对值1, 对值2}，插件共两个对值接口，size 和 gap，size 为频谱条宽度，gap 为频谱条间距。举例：


    let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
    let wave = [85,149,118,...];
    HCPlayer({
       lrcAr:ar,
       ypData: wave,
        pinpu: {size: 6,gap: 2},
    });




4、lrc_css : 歌词即同步颜色设置。提供一个CSS变量参数：--bg，用于设置同步颜色，其实是设置歌词盒子的背景色，可按box背景色的设置配置；歌词底色用CSS属性设置，例如 color: red; ，歌词文本大小同样可用 font 或 font-size 等属性设置。配置举例：


    let ar = [[0.8,"歌句一",2],[4.6,"歌句二",3],...,[201,"歌句N",5]];
    let wave = [85,149,118,...];
    HCPlayer({
       lrcAr:ar,
       ypData: wave,
        pinpu: {size: 6,gap: 2},
        lrc_css: '--bg: linear-gradient(to bottom, red, green); color: #ccc; font-size: 2em;',
    });




5、player_css : 设置播放控制器，即频谱所在的父元素，同时可设置频谱相关属性。CSS变量参数主要有四个：


① --ww : 频谱父元素宽度，可用百分比、px 等设置，例如，--ww: 80%; 或 --ww: 260px;
② --hh : 频谱父元素高度，设置同上，例如，--hh: 180px;
③ --color1 和 ④ --color2 : 设置频谱条渐变的两种颜色，例如，--color1: green; --color2: lightgreen;


此外，频谱位置的设置，请使用CSS的 left、top 、right、bottom 配合设定，不要四个属性全用，一般是一个横向+一个纵向的配套使用就好。


（三）帖子模板


<style>
#papa { margin: 0 0 0 calc(50% - 581px); width: 1000px; height: 640px; background: lightblue url('图片地址') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }


</style>


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


<script>
(function() {
        //插件代码 (function(mkPlayer)...
        //歌词数组 let lrcAr = [[0.6,"黑豹乐队 - 梦波段",...
        //音频波形数据 ypData = [0,0,85,149,...0,0];
        HCPlayer({
                lrcAr: lrcAr,
                ypData: ypData,
                lrc_css: '',
                player_css: '--ww: 100%; --hh: 240px; --color1: blue; --color2: snow; bottom: 0;',
                pinpu: {size: 6,gap: 2},
        });
})();
</script>

前一篇: 【梦波段】响应式条状频谱 （支持同步歌词）
下一篇: 【阿依莫】响应式圆环频谱 （此插件支持歌词同步）