无罔 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-7-25 12:10

无罔

本帖最后由马黑黑于 2023-7-26 12:54 编辑 <br /><br /><style>
.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 = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

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>

马黑黑 发表于 2023-7-25 12:13

本帖最后由马黑黑于 2023-7-27 08:10 编辑

帖子代码
<style>
.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 = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];

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>

马黑黑 发表于 2023-7-25 12:55

本帖最后由马黑黑于 2023-7-25 12:57 编辑

圆环频谱插件配置举例（使用时请将注释 /* ... */ 删掉）：

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 ，改个引用文件名即可，配置参数一样。

马黑黑 发表于 2023-7-25 13:00

本帖最后由马黑黑于 2023-7-25 13:01 编辑

使用默认配置，可以酱紫：

   HCPlayer({
         papa: `.mydiv`,
         lrcAr: lrcAr,
   });

若没有歌词同步需求，lrcAr: lrcAr, 也可以不要，则，这是最简短的参数配置：

   HCPlayer({papa: `.mydiv`});

红影发表于 2023-7-25 19:40

黑黑又把圆环播放器做了封装和上传，真棒{:4_199:}

红影发表于 2023-7-25 19:46

奇怪，我这里点暂停后再点播放，才能看到播放器上的频谱是变化的。
蜜蜂开始也没看到沿着设定路线运动，也是需要暂停再播放才可以。
可能是我网速或电脑问题吧{:4_203:}

醉美水芙蓉 发表于 2023-7-25 20:10

醉美水芙蓉 发表于 2023-7-25 20:11

马黑黑 发表于 2023-7-25 20:44

红影发表于 2023-7-25 19:46
奇怪，我这里点暂停后再点播放，才能看到播放器上的频谱是变化的。
蜜蜂开始也没看到沿着设定路线运动，也 ...

不是电脑问题，估计与资源的下载有关，一定概率。下回在访问一般没问题。具体原因尚未找到。

马黑黑 发表于 2023-7-25 20:45

醉美水芙蓉发表于 2023-7-25 20:11
这个跟前面频谱一样颠倒了吗？

按理不会颠倒吧，应该是围着圆环往外伸缩。

马黑黑 发表于 2023-7-25 20:46

醉美水芙蓉发表于 2023-7-25 20:10
等半天才看见播放器，而且频谱不动，需要手动才动！

{:4_190:}

醉美水芙蓉 发表于 2023-7-25 21:37

醉美水芙蓉 发表于 2023-7-25 21:38

醉美水芙蓉 发表于 2023-7-25 21:39

马黑黑 发表于 2023-7-25 21:53

醉美水芙蓉发表于 2023-7-25 21:37
跟红影美女说的问题相同，估计黑黑老师浏览器高级，我看见风中飞尘朋友还说看见乱码，我想浏览器不同可能看 ...

按理不应该酱紫，我考虑了兼容性问题，没有使用 flex 布局，另外我用Chrome，Edge，百分，Firefox 等测试过，都正常。

马黑黑 发表于 2023-7-25 21:54

醉美水芙蓉发表于 2023-7-25 21:39
点播放器中间就看见乱码了？

按理不会。

醉美水芙蓉 发表于 2023-7-25 22:31

红影发表于 2023-7-25 22:33

马黑黑发表于 2023-7-25 20:44
不是电脑问题，估计与资源的下载有关，一定概率。下回在访问一般没问题。具体原因尚未找到。

好像再进来还是这样呢。之前的封装貌似没这样的问题吧{:4_173:}

马黑黑 发表于 2023-7-25 22:42

红影发表于 2023-7-25 22:33
好像再进来还是这样呢。之前的封装貌似没这样的问题吧

搞不清楚。你再试下

花飞飞 发表于 2023-7-25 22:52

直的和斜的都没有乱码，正常播放。
但也是需点击才动
刷新后，如果上排和下排都是0：00，就可以自动播放，。。
如果上排是0：00，下排是4：33就不会自动播放。

页: [1] 2 3 4 5 6

花潮论坛's Archiver

无罔