红影 发表于 2022-12-16 21:52

梵天净土（学习黑黑示波图效果）


<style>
#papa { margin: 100px 0 0 calc(50% - 717px); width: 1273px; height: 640px; background: gray url('https://pic.imgdb.cn/item/639c2d25b1fccdcd3641cdef.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; overflow: hidden; }
#mplayer { position: absolute; top: 20px; cursor: pointer; }
#bb { position: absolute; left: 120px; top:260px; width: 226px; height: 320px; background: url('https://pic.imgdb.cn/item/639c2af5b1fccdcd363d7dba.png'); cursor: pointer; opacity: .85; transition: .25s; }
.yun {--delay: 0s; position: absolute; right: -520px; top: 140px; width: 500px; height: 235px;animation: sh 52s var(--delay) linear infinite; opacity: 1; }
#mama { position: absolute; width: 300px; height: 300px; left: calc(50% - 130px); top: calc(50% - 130px); display: grid; place-items: center; }
#box { position: absolute; width: 100px; height: 100px; border-radius: 50%; box-shadow: inset -8px -8px 160px -8px snow; animation: circle 4s linear infinite alternate; text-Align: center; line-height: 100px; color: #999;}
@keyframes circle { from { transform: rotate(0) translate(60px); } to { transform: rotate(360deg) translate(60px); } }
@keyframes sh{ to { transform: translateX(-1773px); } }

</style>

<div id="papa">
<div id="mama"><span id="box">梵天净土</span></div>
<div class="yun"><img src="https://pic.imgdb.cn/item/639c4dbbb1fccdcd36776498.png" alt="" /></div>
<div class="yun" style="--delay: 20s; top:80px; width: 400px; height: 188px;"><img src="https://pic.imgdb.cn/item/639c4eecb1fccdcd3679996f.png" alt="" /></div>
      <canvas id="mplayer"></canvas>
      <span id="bb"></span>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=304894.mp3" autoplay></audio>
</div>

<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
(function() {
      ypData = ;
      let total = 50,idx = 0;
      let ctx = mplayer.getContext('2d');
      let w = mplayer.width = 700, h = mplayer.height = 80;
      let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
      let colors = ['blue','AliceBlue'];
      aud.loop = false;

      mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };

      mplayer.onclick = (e) => {
                if(e.offsetY < h * 0.8) {
                        let ac = aud.duration * e.offsetX / w;
                        idx = Math.round(ypData.length * ac / aud.duration);
                        aud.currentTime = ac;
                } else {
                        aud.paused ? aud.play() : aud.pause();
                }
      }

      aud.addEventListener('ended', () => { idx = 0; aud.play(); });

      aud.addEventListener('timeupdate', () => {
                idx = Math.round(ypData.length * aud.currentTime / aud.duration)
                if(idx > ypData.length - 1) idx = ypData.length - 1;
                draw();
      });

      let draw = () => {
                ctx.clearRect(0,0,w,h);
                ctx.strokeStyle = colors;
                ctx.fillStyle = colors;
                ctx.font = '14px sans-serif';
                ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
                ctx.shadowBlur = 2;
                ctx.shadowColor = '#555';
                ctx.textAlign = 'center';
                ctx.beginPath();
                for(j = 0; j <= idx; j ++) {
                        ctx.lineTo(slice*j, h - ypData * h / vmax);
                }
                ctx.stroke();
                ctx.beginPath();
                ctx.strokeStyle = colors;
                for(j = idx + 1; j < ypData.length; j ++) {
                        ctx.lineTo(slice*j, h - ypData * h / vmax);
                }
                ctx.stroke();
                ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
                bb.style.top = 'calc(56% - ' + ypData + 'px)';
      };
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
      draw();
})();
motion();

function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

红影 发表于 2022-12-16 21:53

看看黑黑封装效果都出来，这个套的是没封装的，赶紧发出来{:4_173:}

红影 发表于 2022-12-16 21:55

想起以前的随机小球，也复习一下，否则画面太空了，就算加了2朵云还是觉得空{:4_173:}

红影 发表于 2022-12-16 21:56

示波的波线离时间显示太近了，不知道怎么改@马黑黑 {:4_204:}

千羽 发表于 2022-12-16 21:57

影儿的作业做得真快，，背景的山河图好美啊{:4_187:}

马黑黑 发表于 2022-12-16 22:06

红影 发表于 2022-12-16 21:56
示波的波线离时间显示太近了，不知道怎么改@马黑黑

这个设计的时候就酱的，主要是设想绝大多数歌曲声音的波形在中部都会抬高

亦是金 发表于 2022-12-16 22:07

好有动感的画面！赞一个！{:4_204:}

千羽 发表于 2022-12-16 22:11

白云和小球增添了动感，没感觉到空{:4_181:}

小辣椒 发表于 2022-12-16 22:19

亲爱的，你这个白的频谱漂亮，音标深颜色，特别存托的效果{:4_178:}

小辣椒 发表于 2022-12-16 22:19

红影 发表于 2022-12-16 21:53
看看黑黑封装效果都出来，这个套的是没封装的，赶紧发出来

亲爱的速度的{:4_178:}

红影 发表于 2022-12-16 23:08

千羽 发表于 2022-12-16 21:57
影儿的作业做得真快，，背景的山河图好美啊

下午就做了啊，我做帖子很慢的{:4_173:}

红影 发表于 2022-12-16 23:08

马黑黑 发表于 2022-12-16 22:06
这个设计的时候就酱的，主要是设想绝大多数歌曲声音的波形在中部都会抬高

这个曲子正好降下来了，才变成这样的吧{:4_173:}

红影 发表于 2022-12-16 23:09

亦是金 发表于 2022-12-16 22:07
好有动感的画面！赞一个！

多谢亦是金老师鼓励{:4_187:}

红影 发表于 2022-12-16 23:10

千羽 发表于 2022-12-16 22:11
白云和小球增添了动感，没感觉到空

那就好，做完觉得有点空，就又去加了小球{:4_173:}

红影 发表于 2022-12-16 23:10

小辣椒 发表于 2022-12-16 22:19
亲爱的，你这个白的频谱漂亮，音标深颜色，特别存托的效果

这个不是白，是AliceBlue ，就是黑黑说的有故事的那个颜色{:4_173:}

红影 发表于 2022-12-16 23:11

小辣椒 发表于 2022-12-16 22:19
亲爱的速度的

亲爱的要做更是分分钟事啊{:4_173:}

马黑黑 发表于 2022-12-16 23:44

红影 发表于 2022-12-16 23:08
这个曲子正好降下来了，才变成这样的吧

也许

梦油 发表于 2022-12-17 09:46

随着音乐的节拍，似乎俺已进入了仙境。

红影 发表于 2022-12-17 16:04

马黑黑 发表于 2022-12-16 23:44
也许

它应该是完全跟着音乐规律的。

红影 发表于 2022-12-17 16:05

梦油 发表于 2022-12-17 09:46
随着音乐的节拍，似乎俺已进入了仙境。

巫娜的曲子的确都很好听的。谢谢梦油临帖{:4_204:}
页: [1] 2 3 4 5
查看完整版本: 梵天净土（学习黑黑示波图效果）