小辣椒 发表于 2022-12-4 22:51

寂寞沙洲冷（套用学习黑黑圆频谱）

<style>
#papa { margin: 0 0 0 calc(50% - 730px); position: relative; width: 1280px; height: 698px;;top:150px; background: #000 url('https://yinhua.ru/20221205/02.gif') no-repeat center/cover; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tit { position: absolute; left:0; top:20; padding: 10px 16px; font: bold 2em sans-serif; color: Beige; text-shadow: 1px 2px 4px #000; transition: color .5s; }
#tit:hover { color: green; }
</style>

<div id="papa">
      <span id="tit">学习黑黑圆频谱</span>
</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670158303481584.mp3" autoplay loop crossorigin="anonymous"></audio>

<script>
(function() {
      (function(mkPlayer) {let defaults = { player_css: 'left: calc(50% - 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(180,100%,50%)');ppColor.addColorStop(0.8, 'hsl(120,100%,45%)');ppColor.addColorStop(1, 'hsl(60,90%,35%)');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);for (j = 0; j < output.length; j++) {let value = output / 10;cxt.strokeStyle = value > 20 ? "darkgreen" : "green";cxt.beginPath();cxt.lineWidth = 1;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 = 1;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 = "green";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>
<br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-12-4 22:52

这个图图本来准备加今天那个小圆点频谱的，修改了圆点尺寸。出来效果差不多，就这个图图加圆频谱了

红影 发表于 2022-12-4 22:53

亲爱的真快，这个效果用在帖子里好漂亮的呢{:4_199:}

小辣椒 发表于 2022-12-4 22:54

@马黑黑

黑黑套用一个圆频谱，·我上面的标题字想移动一下弄不好，今天迟了就发了

小辣椒 发表于 2022-12-4 22:55

红影 发表于 2022-12-4 22:53
亲爱的真快，这个效果用在帖子里好漂亮的呢

亲爱的，这个我是临时换的频谱。图图准备加今天的小圆点的，看看效果差不多就加了圆频谱

马黑黑 发表于 2022-12-4 23:39

这个新频谱配上粒子效果很搭配，帖子画面极美，超赞。

标题移动问题，请设置 CSS 关键帧动画：

@keyframes fly { to { left: 860px; } }

左边值 860 是依据帖子尺寸、标题字数和大小计算的，不会计算你就拿像素尺量文本的大致宽度，然后将帖子宽度减去它，再减去一点点（大于10来像素），这样移动到右边时不至于靠边。可以测试运行修正。

梦油 发表于 2022-12-5 09:02

你这个播放器设计的很完美

辫子哥哥 发表于 2022-12-5 13:48

人物是2女1男吗？看上去那第一个男不难，女不女，看看别人的眼光是不是和我不一样@红影

辫子哥哥 发表于 2022-12-5 13:49

也是不懂，不会做就欣赏了{:4_189:}

红影 发表于 2022-12-5 17:49

小辣椒 发表于 2022-12-4 22:55
亲爱的，这个我是临时换的频谱。图图准备加今天的小圆点的，看看效果差不多就加了圆频谱

还是这个圆频谱的好，和背景特别相配{:4_187:}

风中飞尘 发表于 2022-12-6 00:18

周传雄的歌曲 你用居然用S H E {:5_117:}{:5_117:}
页: [1]
查看完整版本: 寂寞沙洲冷（套用学习黑黑圆频谱）