《高原红(女生版DJ)》---再测试频谱
<style>
#papa { margin: 130px 0 20px calc(50% - 681px); width: 1200px; height: 700px; background: url('https://xlaj.cn/bfq/20240320/01.gif ') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv { position: absolute; width: 1200px; height: 180px; left: 0%; bottom: 4px; transform: translate(0%,0); cursor: pointer; }
.pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M-224,150 Q1250,-20 1200,460'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }
.pic:nth-of-type(2) { --delay: -7s; }
.pic:nth-of-type(3) { --delay: -14s; }
@keyframes fly { to { offset-distance: 0; } }
#dt1{ position: absolute; width:80px; height: 91px; top: 260px; left: 320px; }
</style>
<div id="papa">
<imgid="dt1"src="https://xlaj.cn/bfq/20240320/dss.gif" alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
<canvas id="canv" width="600" height="240" title="点击播放"></canvas>
</div>
<script>
(function() {
let aud = new Audio();
aud.crossOrigin = '';
aud.src = 'https://aod.cos.tx.xmcdn.com/storages/88cc-audiofreehighqps/01/41/GKwRIJIJMy3AACAAAAKAvwz5.m4a';
aud.loop = true;
aud.load();
aud.play();
let AudioContext = window.AudioContext || window.webkitAudioContext;
let Ac = new AudioContext;
let analyser = Ac.createAnalyser();
analyser.fftSize = 256;
let source = Ac.createMediaElementSource(aud);
source.connect(analyser);
analyser.connect(Ac.destination);
let len = analyser.frequencyBinCount - 30;
let output = new Uint8Array(len);
let canvctx = canv.getContext('2d');
let ppWidth = canv.width / len;
let ppHeight, x1
let gradient = canvctx.createLinearGradient(0,0,0,180);
gradient.addColorStop(0,'rgba(240,255,240');
gradient.addColorStop(.5,'rgba(0,255,0');
gradient.addColorStop(1,'rgba(0,100,0');
(function draw() {
canvctx.clearRect(0, 0, canv.width, canv.height);
analyser.getByteFrequencyData(output);
x = 0.5;
for(let i = 0; i < len; i ++) {
ppHeight = output[ i ] * .9 + ppWidth;
canvctx.fillStyle = gradient;
canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);
x += ppWidth;
}
requestAnimationFrame(draw);
})();
aud.onpause = aud.onplaying = () => aud.paused ?
(canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :
(canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.onclick = () => aud.paused ? (vid.pause(),vid.pause()) : (vid.play(),vid.play());
})();
</script> 抄了个作业{:4_173:} 主要开始跨越音乐没有找好，前面那个许多朋友说看不见，我自己是看见的，这个频谱朋友说可以看见，我也是弄不清楚，反正我自己2个都看见的 频谱可以看到，动画背景十分漂亮。。。 凤凰路径改了个方向，好看。。
音乐好听。。动感十足。。{:4_187:} 美美的春天的景色。。。看着都醉了 这个瀑布真美啊！ https://img0.baidu.com/it/u=2292154268,3811096393&fm=253&fmt=auto&app=138&f=GIF?w=300&h=280 南无月 发表于 2024-3-26 20:55
频谱可以看到，动画背景十分漂亮。。。
月月好，这个我用的是跨越音乐，应该可以有频谱的了 南无月 发表于 2024-3-26 20:57
凤凰路径改了个方向，好看。。
音乐好听。。动感十足。。
小辣椒鸟路径是抄的亦是金老师的{:4_189:} 梦油 发表于 2024-3-26 20:59
这个瀑布真美啊！
梦油晚上好，学习做了个动图 起个网名好难 发表于 2024-3-26 21:04
难难晚上好，谢谢欣赏{:4_187:} 歌是樵哥哥最喜欢的，唱歌的像潭维维小老乡的声音，也是很喜欢她唱的，那瀑布是家乡九寨沟里的村正瀑布。{:4_171:} 这画面感特别逼真，欣赏学习哈{:4_204:} 看见了，频谱闪耀，波光粼粼，凤凰于飞，一切却是如和谐美好！{:4_182:} 这个动态好装光，频谱色彩也很相配，亲爱的非常飘亮的制作{:4_199:} 樵歌 发表于 2024-3-26 21:17
歌是樵哥哥最喜欢的，唱歌的像潭维维小老乡的声音，也是很喜欢她唱的，那瀑布是家乡九寨沟里的村正瀑布。{: ...
樵哥哥也是喜欢这个DJ版的啊，我是为频谱找了这个DJ版的高原红 朵拉 发表于 2024-3-26 21:18
这画面感特别逼真，欣赏学习哈
朵拉晚上好，谢谢欣赏{:4_179:} 樵歌 发表于 2024-3-26 21:20
看见了，频谱闪耀，波光粼粼，凤凰于飞，一切却是如和谐美好！
樵哥哥的文采真的一流，回个帖都那么的精美词句 红影 发表于 2024-3-26 21:41
这个动态好装光，频谱色彩也很相配，亲爱的非常飘飘的制作
亲爱的，主要求对比频谱可以出来的效果就用了这个动图