无罔(圆形直条&斜条频谱封装代码)
.mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp1/wuwh.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; overflow: hidden; position: relative; z-index: 1; --state: running; }
.mydiv::before,.mydiv::after { position: absolute; left: 0px; top: 0px; content: url('https://638183.freep.cn/638183/Pic/2022/bee01.gif'); offset-path: path('M-20,500 L130,440 L220,550 L370,440 L470,300 L520,590 L600,520 L850,430 L980,500'); animation: move 160s var(--delay) infinite var(--state); --delay: 0s; }
.mydiv::after { --delay: -80.3s; }
@keyframes move { from {offset-distance: 0%; } to { offset-distance: 100%; } }
</style>
<div class="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2065995408.mp3" loop autoplay></audio>
<script >
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/pinpuz_lrc.js';
document.head.appendChild(script);
(function() {
let lrcAr = [ [2,"啊Yue Yue - 无罔",10.5], [11.55,"作曲:田昊",1.8], [15.32,"作词:林乔/零",1.8], [18.14,"制作人:林乔",1.8], [38.3,"我和你 相距着 云端和海洋",5.2], [44.4,"一念近 一念远 未遗忘身在何方",6.5], [52.05,"问过往 恩怨如何细细端详",6.0], [58.63,"时光耳旁说无常",6.0], [66.54,"注定只会 贪欢一晌",6.5], [73.08,"转身隐藏 那眼底的情霜",5.5], [79.94,"纵然遗憾成枉 难附几多愁肠",7.1], [87.34,"深眉锁秋月 夜凄凉",6.0], [94,"奈何思念无望",3.3], [97.45,"爱已成殇 隔天涯骇浪",3.5], [101.58,"水天相拥不过 是美梦一场",6.0], [108.38,"徒断线有回响",3.2], [111.88,"心底藏触不到的对方",3.6], [115.91,"叹情长 爱恨怎可随意 执掌",8.8], [138.68,"我和你 相距着 云端和海洋",5.4], [144.76,"一念近 一念远 未遗忘身在何方",6.8], [152.18,"问过往 恩怨如何细细端详",6.4], [158.84,"时光耳旁说无常",6.4], [166.53,"注定只会 贪欢一晌",6.4], [173.24,"转身隐藏 那眼底的情霜",6.0], [180.37,"纵然遗憾成枉 难附几多愁肠",6.8], [187.46,"深眉锁秋月 夜凄凉",6.0], [194.32,"奈何思念无望",3.4], [197.68,"爱已成殇 隔天涯骇浪",3.8], [201.75,"水天相拥不过 是美梦一场",6.0], [208.58,"徒断线有回响",3.2], [212.06,"心底藏触不到的对方",3.5], [216.06,"叹情长 爱恨怎可随意 执掌",6.0], [223.01,"奈何思念无望",3.3], [226.49,"爱已成殇 隔天涯骇浪",3.5], [230.51,"水天相拥不过 是美梦一场",6.1], [237.31,"徒断线有回响",3.3], [240.72,"心底藏触不到的对方",3.6], [244.81,"叹情长 爱恨怎可随意执掌",6.0], ];
window.onload = () => {
HCPlayer({
papa: `.mydiv`,
lrcAr: lrcAr,
lrc_css: `
top: 15px;
color: snow;
`,
player_css: `
color: snow;
top: 120px;
--len: 2px;
`,
pinpu_num: 60,
});
}
})();
</script>
------------------------------------------------------------------------------------------------------------
圆环频谱插件配置举例(使用时请将注释 /* ... */ 删掉):
window.onload = () => {
HCPlayer({
papa: `.mydiv`, /* 指明帖子主元素标识 如果是 id 则是 `#mydiv`*/
lrcAr: lrcAr, /* lrc歌词 冒号后面的 lrcAr 是事先声明的数组变量 */
lrc_css: ` /* 配置lrc歌词 UI */
top: 15px; /* 上边 */
left: 15px; /* 左边 */
color: snow; /* 歌词底色 */
--bg: linear-gradient(red,green); /* 同步颜色 */
`,
player_css: ` /* 配置播放器 UI */
color: snow; /* 文本颜色 */
top: 120px; /* 上边 */
left: 45%; /* 左边 */
--len: 2px; /* 频谱条大小 */
`,
pinpu_num: 60, /* 频谱条数 注意结合上面的 --len 合理设置 */
});
}
上面的频谱条是站立姿势的,歪斜的文档名是 pinpux_lrc.js ,改个引用文件名即可,配置参数一样。
-------------------------------------------------------------------------------------------------------------
使用默认配置,可以酱紫:
HCPlayer({
papa: `.mydiv`,
lrcAr: lrcAr,
});
若没有歌词同步需求,lrcAr: lrcAr, 也可以不要,则,这是最简短的参数配置:
HCPlayer({papa: `.mydiv`});
前一篇: 《许愿树》修正代码
下一篇: 荒羽(封装带进度条的小圆头频谱代码)
评论列表 [0条]