重生
<style>#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; }
@keyframes move { to { top: 90%; } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/reborn.mp3" autoplay loop crossorigin="anonymous"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xyppz_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
left: 30px;
top: 20px;
animation: move 10s infinite alternate linear var(--state);
--bg: linear-gradient(rgba(250,10,10,.2),rgba(255,0,0,.75));
`,
player_css: `
bottom: 100px;
right: 100px;
--len: 4px;
--color: #eee;
`,
fs_css: 'background: red; color: white;',
pinpu_num: 60,
pinpu_color: 'red',
});
};
})();
</script>
本帖最后由 马黑黑 于 2023-8-25 12:27 编辑
帖子代码
<style>
#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; }
@keyframes move { to { top: 90%; } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/reborn.mp3" autoplay loop crossorigin="anonymous"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xyppz_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
left: 30px;
top: 20px;
animation: move 10s infinite alternate linear var(--state);
--bg: linear-gradient(rgba(250,10,10,.2),rgba(255,0,0,.75));
`,
player_css: `
bottom: 100px;
right: 100px;
--len: 4px;
--color: #eee;
`,
fs_css: 'background: red; color: white;',
pinpu_num: 60,
pinpu_color: 'red',
});
};
})();
</script>
pinpu_num 和 pinpu_color 分别是频谱条数和频谱颜色，后者不设置或设为空值 pinpu_color: '', 则使用随机色；频谱帽颜色与时间信息文本共享 --color 变量指定的颜色；频谱条的厚度（或叫宽度吧）由变量 --len 设定。
本帖最后由 马黑黑 于 2023-8-25 13:03 编辑
小辣椒 发表于 2023-8-25 12:08
这个是不规则的频谱？
圆环的响应式频谱，根据歌曲的律动与音响决定它的形状。需要歌曲是可以跨域的，或帖子和歌曲在同一个网站。 马黑黑 发表于 2023-8-25 12:10
圆环的响应式频谱，根据歌曲的律动与音响决定它的形状。
刚才插队了，赶紧删除了{:4_170:} 小辣椒 发表于 2023-8-25 12:15
刚才插队了，赶紧删除了
又挨扣分了{:4_189:} 马黑黑 发表于 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 18:25 编辑
小辣椒 发表于 2023-8-25 13:00
那我自己空间是不行的
你不是试得出来了吗？音乐和帖子放在你的网站，或放在小文的微风盘。 东篱闲人 发表于 2023-8-25 12:53
凤凰涅槃。。。
大约 音乐很震撼，帖子的画面也很震撼，当然响应式频谱的效果更震撼。欣赏黑黑好帖{:4_199:} 红影 发表于 2023-8-25 16:07
音乐很震撼，帖子的画面也很震撼，当然响应式频谱的效果更震撼。欣赏黑黑好帖
矮油，一个简简单单的帖子，值得用三个震撼{:4_170:} 这是火凤凰吗？气势强，身姿美。和那小太阳似的播放器相映生辉，黑黑老师棒棒哒{:4_187:}{:4_178:} 千羽 发表于 2023-8-25 19:16
这是火凤凰吗？气势强，身姿美。和那小太阳似的播放器相映生辉，黑黑老师棒棒哒
晚上嚎 马黑黑 发表于 2023-8-25 18:26
矮油，一个简简单单的帖子，值得用三个震撼
还要加的：不需要上传html也很震撼{:4_173:}