【解说】响应式条状频谱
(二)插件参数及解释
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>
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>
发表评论:
评论列表 [0条]