【黑师代码】光亮（学习黑师20240319《三十里铺》响应频谱效果）
本帖最后由 南无月 于 2024-3-31 21:02 编辑 <br /><br /><style>#papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/65fed57a9f345e8d03124ff1.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv { position: absolute; left: 18%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }
.pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M1724,-80 Q1550,-20 -100,360'); 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; } }
#vid { position: absolute; width: 120%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .52; transform: rotateY(180deg); }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c62b9766e.mp4" autoplay="" loop="" muted=""></video>
<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://yinpin.s3-us-east-1.ossfiles.com/qihang.mp3';
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, x;
let gradient = canvctx.createLinearGradient(0,0,0,200);
gradient.addColorStop(0,'rgba(255,165,0');
gradient.addColorStop(.5,'rgba(255,165,0');
gradient.addColorStop(1,'rgba(128,128,128');
(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>
非常完美的显示。。
频谱还是靠边上放了哈。。
频谱高度是不是也是经过计算的。
因为别的音乐会出现整个高度都是平平的
@马黑黑 南无月 发表于 2024-3-22 17:59
非常完美的显示。。
频谱还是靠边上放了哈。。
频谱高度是不是也是经过计算的。
辛苦辛苦！
可视化音频播放，频谱会因为歌曲的声音频率、振幅等数据而做响应式变化，每一首歌可能会不一样，所以必要时调节相关系数 喜欢{:4_170:} 真漂亮！让心情随着音乐对大自然的遐想，在广阔的天空中翱翔。。
{:4_204:}{:4_178:}{:4_199:} 一切都是如此和谐完美！ 马黑黑 发表于 2024-3-22 18:54
辛苦辛苦！
可视化音频播放，频谱会因为歌曲的声音频率、振幅等数据而做响应式变化，每一首歌可能会不 ...
辛苦的是老师，我只不过喊喊：师傅，救命啊。。{:4_170:} 南无月 发表于 2024-3-22 20:45
辛苦的是老师，我只不过喊喊：师傅，救命啊。。
喊救命是很辛苦的 马黑黑 发表于 2024-3-22 18:54
辛苦辛苦！
可视化音频播放，频谱会因为歌曲的声音频率、振幅等数据而做响应式变化，每一首歌可能会不 ...
我试过调矮一点，就全平了，后来恢复原高比较正常。。 小文 发表于 2024-3-22 18:59
喜欢
感谢小文支持。{:4_190:} 大猫咪 发表于 2024-3-22 19:32
真漂亮！让心情随着音乐对大自然的遐想，在广阔的天空中翱翔。。
感谢大猫咪支持鼓励。{:4_190:} 樵歌 发表于 2024-3-22 19:45
一切都是如此和谐完美！
感谢樵管支持鼓励。。{:4_190:} 马黑黑 发表于 2024-3-22 20:45
喊救命是很辛苦的
辛苦不辛苦先喝杯茶先{:4_190:} 南无月 发表于 2024-3-22 20:50
辛苦不辛苦先喝杯茶先
好哒 南无月 发表于 2024-3-22 20:46
我试过调矮一点，就全平了，后来恢复原高比较正常。。
调整哪一些参数、怎么调整，这个需要经验 马黑黑 发表于 2024-3-22 20:52
调整哪一些参数、怎么调整，这个需要经验
木有经验。。。
抄个作业都抄得一头汗。。。
我得去试啊。。
反正不能简单调高度{:4_173:} 南无月 发表于 2024-3-22 21:00
木有经验。。。
抄个作业都抄得一头汗。。。
我得去试啊。。
{:4_190:} 马黑黑 发表于 2024-3-22 20:51
好哒
茶是我的{:4_170:}
老师喝酒{:4_176:} 南无月 发表于 2024-3-22 21:01
茶是我的
老师喝酒
俺不喝红酒 马黑黑 发表于 2024-3-22 21:28
俺不喝红酒
{:4_170:}那红酒也是我滴。。