红古尔
本帖最后由 马黑黑 于 2023-8-17 21:54 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 621px); width: 1080px; height: 608px; background: url('https://638183.freep.cn/638183/t23/3/hsgu.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
.clover { position: absolute; top: -200px; width: 100px; height: 100px; outline: 0; border: 0; background: green; opacity: .7; animation: up 20s var(--delay) infinite linear var(--state); }
@keyframes up { to { transform: rotate(var(--deg)) translateY(1200px) rotate(2turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2029165786" autoplay></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xypinpu_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ];
ypData = ;
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
ypData: ypData,
lrc_css: '',
player_css: '--ww: 50%; --hh: 160px; --color1: snow; --color2: red; bottom: 0;',
pinpu: {size: 5, gap: 1}, /* 频谱条宽度与彼此间间隔 */
});
};
let mkClover = (ele,num) => {
let r = ele.offsetWidth / 2, pathAr = [];
for(let i = 0; i < 200; i ++) {
let angle = i * 2 * Math.PI / 200;
let x = r - r * Math.sin(num * angle) * Math.cos(angle);
let y = r - r * Math.sin(num * angle) * Math.sin(angle);
pathAr.push(x + 'px ' + y + 'px');
}
return 'polygon(' + pathAr.join(', ') + ')';
}
Array.from({length: 36}).forEach((item) => {
let ww = 50 + Math.floor(Math.random() * 50);
let ar = ;
item = document.createElement('span');
item.className = 'clover';
item.style.cssText += `
--deg: ${80 - Math.random() * 140}deg;
--delay: ${Math.random() * 10 - 20}s;
width: ${ww}px;
height: ${ww}px;
left: ${30 + Math.random() * 40}%;
`;
papa.appendChild(item);
item.style.clipPath = mkClover(item, ar);
});
})();
</script>
本帖最后由 马黑黑 于 2023-8-17 22:04 编辑
插件配置：
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xypinpu_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ ];
let ypData = [/*这里是音波数据*/];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
ypData: ypData,
lrc_css: '',
player_css: '--ww: 50%; --hh: 160px; --color1: snow; --color2: red; bottom: 0;',
pinpu: {size: 5, gap: 1}, /* 频谱条宽度与彼此间间隔 */
});
};
更多内容请查阅 HCPlayer插件汇总 (52qingyin.cn) 相关条目
本帖最后由 马黑黑 于 2023-8-17 23:10 编辑
频谱相响应是假的，达不到动态获取实时音波的效果。
不提供音波数据插件一样工作，效果也是可以的。如果没有音波数据，则请将 ypData 变量删除，包括插件配置里的 ypData 参数。
黑黑又出新插件了，真棒{:4_199:} 马黑黑 发表于 2023-8-17 21:54
频谱相应是假的，达不到动态获取实时音波的效果。
不提供音波数据插件一样工作，效果也是可以的。如果没 ...
还以为这个效果只能配快节奏的歌曲了，原来有音波文件的，应该可以慢歌也能做了{:4_173:} 好久没做音波文件了，都快忘了怎么做了，有这个好，可以复习一下音波文件了{:4_173:} 欣赏！ 红影 发表于 2023-8-17 22:16
黑黑又出新插件了，真棒
假响应式，其实过去做过的，这里改变了一些设置与算法（虽然算法也不理想） 小文 发表于 2023-8-17 22:55
欣赏！
晚上好 红影 发表于 2023-8-17 22:20
好久没做音波文件了，都快忘了怎么做了，有这个好，可以复习一下音波文件了
有个生成音频数据的页面的 红影 发表于 2023-8-17 22:19
还以为这个效果只能配快节奏的歌曲了，原来有音波文件的，应该可以慢歌也能做了
效果肯定没有实时音波的好 马黑黑 发表于 2023-8-17 22:59
假响应式，其实过去做过的，这里改变了一些设置与算法（虽然算法也不理想）
去试了一下，把以前做的音波文件放进去，基本能响应呢。 马黑黑 发表于 2023-8-17 23:00
有个生成音频数据的页面的
是啊，我记得那个置顶了，找到应该很容易{:4_173:} 马黑黑 发表于 2023-8-17 23:00
效果肯定没有实时音波的好
能做到这种程度，已经很棒了{:4_199:} 红影 发表于 2023-8-18 10:11
能做到这种程度，已经很棒了
收集音波，从大多数音频品质看，需要512个通道的信息并将这些信息作用于每一根频谱，就会很完美。我这个插件，只取一个信号通道的数据。 红影 发表于 2023-8-18 10:10
是啊，我记得那个置顶了，找到应该很容易
我会自行不定期将一些置顶帖放下，我不太主张什么都置顶 红影 发表于 2023-8-18 10:10
去试了一下，把以前做的音波文件放进去，基本能响应呢。
有限的响应，细节不全面、律动不精准 醉美水芙蓉 发表于 2023-8-18 07:12
欣赏学习老师作品！
{:4_190:} 马黑黑 发表于 2023-8-18 11:57
我会自行不定期将一些置顶帖放下，我不太主张什么都置顶
怪不得，前面试做一个歌曲，发现找不到那个音波文件了，翻文件翻了半天。
现在又暂时置顶了，应为正好要用到它{:4_173:}