谁的人生不孤独（学习黑黑圆环音乐频谱关联）
<style>#papa { margin: 0 0 0 calc(50% - 681px); position: relative; width: 1200px; height: 640px; overflow: hidden; background: #0b1a3a; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tu { position: absolute; width: 1200px;left: 0px; top: 0px;opacity: 1; }
#tit{position: absolute; left:-180px; top: -10px;background-image:url('https://pic.imgdb.cn/item/638ded91b1fccdcd36b7d447.gif'); background-size:cover; width:800px; height:200px; font: bold 3.2em sans-serif; text-align:center; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="papa">
<img id="tu" src="http://image.hnol.net/c/2017-06/08/13/20170608131619191-2127595.jpg" alt="" />
<div id="tit">谁的人生不孤独</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670245564709429.mp3" loop autoplayloop crossorigin="anonymous"></audio>
</div>
<script>
(function() {
(function(mkPlayer) {let defaults = { player_css: 'right: 100px; bottom: 0;',playerCode: '<canvas id="mplayer" height="200" width="200" style="position: absolute; cursor: pointer;"></canvas>',};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;let ballSize = data.size;mplayer.style.cssText += data.player_css;let context = new AudioContext;let source = context.createMediaElementSource(aud);let analyser = context.createAnalyser();source.connect(analyser);analyser.connect(context.destination);let output = new Uint8Array(361);let length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;let output2 = new Uint8Array(length);let cxt = mplayer.getContext("2d");(function draw() {let ppColor = cxt.createLinearGradient(0,0,mplayer.width-100,mplayer.height);ppColor.addColorStop(0, 'hsl(190,100%,90%)');ppColor.addColorStop(0.8, 'hsl(220,100%,72%)');ppColor.addColorStop(1, 'hsl(286,100%,80%)');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);
for (j = 0; j < output.length; j++) {if(j % 5 === 0){ let value = output / 10;cxt.strokeStyle = value > 20 ? "hsl(240, 100%, 43%)" : "blue";cxt.beginPath();cxt.lineWidth = 2;cxt.moveTo(100, 100);cxt.lineTo(Math.cos((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100, (- Math.sin((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100));cxt.stroke();cxt.beginPath();cxt.lineWidth = 2;cxt.moveTo(100, 100);cxt.lineTo((Math.sin((j * 0.5) / 180 * Math.PI) * (60 + value) + 100), -Math.cos((j * 0.5) / 180 * Math.PI) * (60 + value) + 100);cxt.stroke();}}
cxt.beginPath();cxt.lineWidth = 1;cxt.arc(100, 100, 60, 0, 2 * Math.PI, false);cxt.fillStyle = ppColor;cxt.stroke();cxt.fill();analyser.getByteTimeDomainData(output2);let height = 100, width = 120;cxt.beginPath();cxt.strokeStyle = "blue";for (j = 0; j < width; j++) {cxt.lineTo(j + 40, 100 - (height / 2 * (output2 / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({});
})();
</script> 哇瑟~~~亲爱的，太漂亮了，大赞的{:4_178:} 音乐有的 小辣椒 发表于 2022-12-5 21:31
亲爱的~~这个频谱我好像看不见
前面还在编辑，复制的时候没弄好，现在应该有了吧{:4_173:} 我把四周短线弄得疏了点，看看不好，把小短线加大了线宽。又修改了一下颜色。随手做个帖子，主要想看看效果如何@马黑黑{:4_173:} 把不语最新发的图图又拿来个用了。谢谢不语。 @闲言不语{:4_204:} 红影 发表于 2022-12-5 21:42
前面还在编辑，复制的时候没弄好，现在应该有了吧
非常漂亮的{:4_199:}
这个圆频谱改粗了一个，线条清晰 红影 发表于 2022-12-5 21:44
我把四周短线弄得疏了点，看看不好，把小短线加大了线宽。又修改了一下颜色。随手做个帖子，主要想看看效果 ...
这个修改很赞！！！{:4_187:} 师妹是越来越厉害了，越做越好看了。{:4_187:} 太漂亮啦！标题的字很美，播放器特很别致。{:4_199:} 小辣椒 发表于 2022-12-5 21:50
非常漂亮的
这个圆频谱改粗了一个，线条清晰
嗯，问了黑黑怎样修改线条密度，然后就去动手修改了{:4_173:} 马黑黑 发表于 2022-12-5 23:00
这个修改很赞！！！
这些四周小短线的长度在哪改的，觉得有点短了，看不出错落的感觉{:4_173:} 樵歌 发表于 2022-12-6 07:21
师妹是越来越厉害了，越做越好看了。
又是从不语那个国家地理的帖子里搬的图图，可以省去自己上传了{:4_189:} 梦油 发表于 2022-12-6 09:47
太漂亮啦！标题的字很美，播放器特很别致。
标题字我是学的寒冬残荷的动态字，频谱是学的黑黑的代码，图片是用的不语的转发。全都是别人的东东{:4_189:} 红影 发表于 2022-12-6 13:56
标题字我是学的寒冬残荷的动态字，频谱是学的黑黑的代码，图片是用的不语的转发。全都是别人的东东{:4_18 ...
经过你的重新组合，它便有了新的生命。 红影 发表于 2022-12-5 21:45
把不语最新发的图图又拿来个用了。谢谢不语。 @闲言不语
天呀，这太客气了，没这么必要吧，搞的俺是有产权似的，下不为例哟。{:4_199:} 梦油 发表于 2022-12-6 15:11
经过你的重新组合，它便有了新的生命。
哈哈，只是为了好玩的{:4_173:} 闲言不语 发表于 2022-12-6 19:08
天呀，这太客气了，没这么必要吧，搞的俺是有产权似的，下不为例哟。
还是要谢的，不语带来的图图真的太美了{:4_187:} 红影 发表于 2022-12-6 13:51
这些四周小短线的长度在哪改的，觉得有点短了，看不出错落的感觉
具体哪一行你自己找找：
let value = output / 8;
output 数组是声音相关信息，是线条长度的依据，我每一个音频声音单元的信息都除以8，你修改 8 为其他合适的数字即可 红影 发表于 2022-12-6 19:23
哈哈，只是为了好玩的
玩出了彩