钢琴
本帖最后由 绿叶清舟 于 2024-4-16 19:26 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 633px); width: 1100px; height: 700px; background: url('https://p.upyun.com/demo/tmp/UbpMPtKQ.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
#canv { position: absolute; left: 26%; bottom: 4px; transform: translate(-50%,0); cursor: pointer; }
.pic { position: absolute; width: 240px; mix-blend-mode: multiply; offset-path: path('M1124,280 Q750,-20 -100,70'); 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; } }
</style>
<div id="papa">
<img class="pic" src="https://5b0988e595225.cdn.sohucs.com/images/20171128/2502100a74c9464fbe6f743ef1c16953.gif" alt="" />
<img class="pic" src="https://5b0988e595225.cdn.sohucs.com/images/20171128/2502100a74c9464fbe6f743ef1c16953.gif" alt="" />
<img class="pic" src="https://5b0988e595225.cdn.sohucs.com/images/20171128/2502100a74c9464fbe6f743ef1c16953.gif" alt="" />
<canvas id="canv" width="600" height="240" title="点击播放"></canvas>
</div>
<script>
const aud = new Audio();
aud.src = 'https://m10.music.126.net/20240416194730/d1519608f29e5516ad475f0339a353d5/ymusic/cd2b/e84c/146f/b0a38ba39745cdd526f37a262d6250c2.mp3';
aud.crossOrigin = '';
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,200,0);
gradient.addColorStop(0,'rgba(0,0,0');
gradient.addColorStop(.5,'rgba(255,255,255');
gradient.addColorStop(1,'rgba(0,0,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();
</script> 欣赏。 我这里看不到频谱动。。。 频谱位置刚好在琴键之上，这个设计绝妙。。{:4_204:} 我怎么没有听到音乐呢 清舟你这个音乐失效了，我取出来也是不能听到 换了链接再看看效果{:4_173:} 清舟朋友晚上好！ 这个设计得分 音乐链接失效了吧， 马黑黑 发表于 2024-4-15 21:10
这个设计得分
这里不让用网易音乐啊，取了MP3的地址也没用 起个网名好难 发表于 2024-4-15 21:23
音乐链接失效了吧，
是啊，只有我自己能听到的了 梦油 发表于 2024-4-15 21:02
清舟朋友晚上好！
梦油上午好 小辣椒 发表于 2024-4-15 20:55
换了链接再看看效果
辣椒好，换好了 小辣椒 发表于 2024-4-15 20:54
清舟你这个音乐失效了，我取出来也是不能听到
不知道为啥了，就俺自己能听但没有显示是VIP的 小九 发表于 2024-4-15 20:42
我怎么没有听到音乐呢
藏起来了{:4_189:} 南无月 发表于 2024-4-15 20:29
我这里看不到频谱动。。。
是音乐的关系了 庶民 发表于 2024-4-15 20:14
欣赏。
谢谢庶民 绿叶清舟 发表于 2024-4-16 11:06
这里不让用网易音乐啊，取了MP3的地址也没用
地址是啥 我这样也是听不到音乐，没法欣赏效果了呢{:4_204:}