刀郎 - 未来的底片

马黑黑 · 发表于 2023-9-19 18:16

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-9-19 18:16

本帖最后由马黑黑于 2023-9-19 18:18 编辑

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/02.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa > img { border-radius: 50%; opacity: .05; }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/t23/webp2/dipm.webp" alt="" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486984" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ [2.00,"刀郎 - 未来的底片",13.7], [15.50," 昨日犹似羽衣舞今朝北邙狐兔窟",17.0], [36.65," 当天空依旧愁云山雨欲来",3.4], [40.00," 岩洞里阴冷潮湿没有火的照应",5.5], [49.5," 这样的天气这样的日子里",3.8], [53.25," 狐狸还只是无法对映的光景",4.4], [61.55," 所有的需要都只是身体的需要",3.8], [65.33," 意义仅仅是孤简的风干的粮草",4.0], [70.08," 走过了蛮荒的高原去往成熟的麦田",5.0], [75.15," 这世界我们来去轮转像一个圈套",5.2], [80.77," 就在这反复不倦的身体里面",3.4], [84.18," 一片片预言一把把刀镰",3.1], [87.24," 不停地劈开人群预定的交换",4.3], [102.91," 西风飒飒依旧冷潭水时而清澈时而浑",6.9], [109.96," 在梦里贡献着一列列愉悦单据的人们",4.9], [114.84," 把镜中的月水中的花墙上的遗志笔下的七魄三魂",6.3], [121.18," 打印成点阵清晰黑白分明的年轮",4.7], [126.28," 在村头金黄的麦地雄伟的石狮守护老爷的厚道",6.6], [133.44," 一对对锄头在反复地耕耘里换成了枪炮",6.1], [139.56," 狐狸已经出现在地主家的书简吞尽了狼烟",5.1], [144.62," 逍遥地在穹顶大地留白间写下这一道一道的符号",8.0], [182.73," 城邦的狐狸在桃欢柳笑",4.6], [187.34," 意义的幻境来自未来的妖",3.1], [190.43," 重现在虚拟的一零一零一零幺",2.9], [193.32," 历史照着镜子成长在反复叙事",4.1], [197.45," 预言在屏幕里交换的全都是模板的样式",4.4], [201.8," 在霓虹闪烁的高楼循环的快感滋养未来的符号",6.2], [207.96," 灵魂在重启的账户的路径里不停地哀嚎",6.0], [214.3," 狐狸还在祷告在止于黑的拂晓昼夜地舞蹈",5.7], [219.99," 追逐使无为的生存变得需要",3.4], [223.42," 在意义里无谓地骄傲",2.4], [225.79," 在止于黑的拂晓",3] ];
let js1 = 'https://638183.freep.cn/638183/web/api/curve_lrc.js', js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px;',
fs_css: 'color: #ddd; background: transparent;',
player_css: `
bottom: 10px;
--track: lightgray;
--prog: lightgreen;
`,
dir: 0,
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 100,
size: {width: 15, height: 15},
shape: {background: '', borderRadius: ''},
ani: 'toLeft',
maxTime: 30,
offset: {x: 100, y: 100},
});
});
})();
</script>

复制代码

马黑黑 · 发表于 2023-9-19 18:24

本帖最后由马黑黑于 2023-9-19 20:20 编辑

曲线进度条播放器插件配置：

            HCPlayer({
                     papa: '#papa',
                     lrcAr: lrcAr,
                     lrc_css: 'top: 20px;',
                     fs_css: 'color: #ddd; background: transparent;',
                     player_css: `
                              bottom: 10px;
                              --track: lightgray;
                              --prog: lightgreen;
                     `,
                     dir: 0,
            });

dir 是此前插件没有的，它的作用是曲线凸面朝向，可选择共两个：0 和 1，0就是本帖的样纸，1 凸面朝上，默认或缺失是 0 。

播放器可以定义宽高尺寸，在 player_css 参数中用CSS语句：

                     player_css: `
                              width: 300;
                              height: 100;
                              bottom: 10px;
                              border-width: 0;
                              --track: lightgray;
                              --prog: lightgreen;
                     `,
插件对播放器的尺寸有一个限制：最低宽高为 160 * 60，自定义低于这个数值的使用该数值。

马黑黑 · 发表于 2023-9-19 18:29

另外，可以自定义播放器的播放、暂停按钮，设置参数是 img : {play: '', pause: ''}，例如：

HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px;',
fs_css: 'color: #ddd; background: transparent;',
player_css: `
bottom: 10px;
border-width: 0;
--track: lightgray;
--prog: lightgreen;
`,
dir: 0,
img: {play: '播放图片地址', pause: '暂停图片地址'},
});

插件图片锁死为 32 *32，自定义图片若不是这个尺寸也会强制使用该尺寸。