午后・时光

模拟动态示波进度条播放器(少女净妖师)解说

位置: 首页 > 黑氏代码[ 发布时间: 2023.3.2  作者: 水手  阅读: 110 ]
(二)参数即配置


1、lrcAr : 接收帖子歌词同步数组,例如:let arr = [ [2,"帖子标题",3] ]; 配置举例如下:


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


<script>
//这里是插件代码
let arr = [ [2,"歌词一",3], [6,"歌词二",2.7], /* ... */ ];
HCPlayer({
    lrcAr: arr,
});


2、lrc_css : 歌词显示样式设定,① 接收一个CSS变量 --bg ,支持颜色和渐变颜色,例如:--bg: red; 或 --bg: linear(180deg, red, pink); ② 接收CSS属性 color 设置歌词底色,仅支持颜色表达法,例如: color: #ccc; ③ 定位使用CSS属性 left/right 和 top/bottom 配对进行。 配置举例:


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


<script>
//这里是插件代码
let arr = [ [2,"歌词一",3], [6,"歌词二",2.7], /* ... */ ];
HCPlayer({
    lrcAr: arr,
    lrc_css: '--bg: linear-gradient(180deg,hsla(0,100%,50%,.35),hsla(200,100%,50%,.65)); color: lightblue; top: 10px;',
});




3、player_css : 播放控制器设定。① --ww 变量设置播放器长度;② --color1 设置示波表示播放进度部分的颜色,--color2 设置示波底轨颜色;③ ③ 定位使用CSS属性 left/right 和 top/bottom 配对进行。配置举例:


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


<script>
//这里是插件代码
let arr = [ [2,"歌词一",3], [6,"歌词二",2.7], /* ... */ ];
HCPlayer({
    lrcAr: arr,
    lrc_css: '--bg: linear-gradient(180deg,hsla(0,100%,50%,.35),hsla(200,100%,50%,.65)); color: lightblue; top: 10px;',
    player_css: '--color1: red; --color2: lightblue; --ww: 400px; bottom: 5px;',


});




【注意】每一个参数配置结束,均以小角逗号 ,  收尾!

前一篇: 少女净妖师
下一篇: 【梦波段】响应式条状频谱 (支持同步歌词)

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com