重生

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/reborn.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; }
   
3.         @keyframes move { to { top: 90%; } }
   
4. </style>
   
5. 
   
6. <div id="papa"></div>
   
7. <audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/reborn.mp3" autoplay loop crossorigin="anonymous"></audio>
   
8. 
   
9. <script>
   
10.         
    
11. (function() {
    
12.         let script = document.createElement('script');
    
13.         script.src = 'https://638183.freep.cn/638183/web/api/xyppz_lrc.js';
    
14.         script.charset = 'utf-8';
    
15.         document.head.appendChild(script);
    
16.         let geci = [ [1,"重 生",2] ];
    
17.         script.onload = () => {
    
18.                 HCPlayer({
    
19.                         papa: '#papa',
    
20.                         lrcAr: geci,
    
21.                         lrc_css: `
    
22.                                 left: 30px;
    
23.                                 top: 20px;
    
24.                                 animation: move 10s infinite alternate linear var(--state);
    
25.                                 --bg: linear-gradient(rgba(250,10,10,.2),rgba(255,0,0,.75));
    
26.                         `,
    
27.                         player_css: `
    
28.                                 bottom: 100px;
    
29.                                 right: 100px;
    
30.                                 --len: 4px;
    
31.                                 --color: #eee;
    
32.                         `,
    
33.                         fs_css: 'background: red; color: white;',
    
34.                         pinpu_num: 60,
    
35.                         pinpu_color: 'red',
    
36.                 });
    
37.         };
    
38. })();
    
39. 
    
40. </script>
    

复制代码

pinpu_num 和 pinpu_color 分别是频谱条数和频谱颜色，后者不设置或设为空值 pinpu_color: '', 则使用随机色；频谱帽颜色与时间信息文本共享 --color 变量指定的颜色；频谱条的厚度（或叫宽度吧）由变量 --len 设定。

马黑黑

小辣椒 发表于 2023-8-25 12:08
这个是不规则的频谱？

圆环的响应式频谱，根据歌曲的律动与音响决定它的形状。需要歌曲是可以跨域的，或帖子和歌曲在同一个网站。

小辣椒

马黑黑 发表于 2023-8-25 12:10
圆环的响应式频谱，根据歌曲的律动与音响决定它的形状。

刚才插队了，赶紧删除了

马黑黑

小辣椒 发表于 2023-8-25 12:15
刚才插队了，赶紧删除了

又挨扣分了

小辣椒

马黑黑 发表于 2023-8-25 12:10
圆环的响应式频谱，根据歌曲的律动与音响决定它的形状。

这个频谱漂亮的，我会抽空做一次，

黑黑我昨天发现一个问题，我做了个发现全部欣赏点击不了

马黑黑

小辣椒 发表于 2023-8-25 12:16
这个频谱漂亮的，我会抽空做一次，

黑黑我昨天发现一个问题，我做了个发现全部欣赏点击不了

代码若有错，肯定是点不了的

小辣椒

马黑黑 发表于 2023-8-25 12:15
又挨扣分了

黑黑，我马上测试了，我就是套用你的换了音乐和图片不能出来了

小辣椒

马黑黑 发表于 2023-8-25 12:17
代码若有错，肯定是点不了的

我纯套用的，就是图片加大了

马黑黑

小辣椒 发表于 2023-8-25 12:32
我纯套用的，就是图片加大了

套用也不保证代码没错，错一个标点，JS也不能正常运行

东篱闲人

凤凰涅槃。。。

马黑黑

小辣椒 发表于 2023-8-25 12:32
黑黑，我马上测试了，我就是套用你的换了音乐和图片不能出来了

音乐必须是可以跨域的。如果不可以，必须是同源的。另外，响应式可视化播放器，也就是音频上下文数据的读取，需要本地测试的，有两个解决方法（任选一个）：

其一，音频资源是可以绝对跨域的；
其二，运行在虚拟服务器之下。

如果没有办法满足本地测试条件，那只有做好上传后查看效果。

小辣椒

马黑黑 发表于 2023-8-25 12:55
音乐必须是可以跨域的。如果不可以，必须是同源的。另外，响应式可视化播放器，也就是音频上下文数据的读 ...

那我自己空间是不行的

马黑黑

小辣椒 发表于 2023-8-25 13:00
那我自己空间是不行的

你不是试得出来了吗？音乐和帖子放在你的网站，或放在小文的微风盘。

马黑黑

东篱闲人 发表于 2023-8-25 12:53
凤凰涅槃。。。

大约

红影

音乐很震撼，帖子的画面也很震撼，当然响应式频谱的效果更震撼。欣赏黑黑好帖

马黑黑

红影 发表于 2023-8-25 16:07
音乐很震撼，帖子的画面也很震撼，当然响应式频谱的效果更震撼。欣赏黑黑好帖

矮油，一个简简单单的帖子，值得用三个震撼

千羽

这是火凤凰吗？气势强，身姿美。和那小太阳似的播放器相映生辉，黑黑老师棒棒哒

马黑黑

千羽 发表于 2023-8-25 19:16
这是火凤凰吗？气势强，身姿美。和那小太阳似的播放器相映生辉，黑黑老师棒棒哒

晚上嚎

红影

马黑黑 发表于 2023-8-25 18:26
矮油，一个简简单单的帖子，值得用三个震撼

还要加的：不需要上传html也很震撼