绿叶清舟 发表于 2023-3-8 22:07

When the World Was New

<style>
#papa { left: -255px; /*margin: auto;*/ width: 1100px; height: 700px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/6408948ff144a01007edb148.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 55px;left: 408px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
#lrcbox { position: absolute; left: 350px; top: 10px; font: bold 30px / 40px sans-serif; color: #abbfc6; text-shadow: 1px 1px 2px #000, 10px 10px 10px rgba(0, 0, 0, .35); user-select: none; }

#mplayer {
      position: absolute;
      width: 310px;
      height: 310px;
      right: 479px;
      top: 20%;
      border-radius: 55%;
      cursor: pointer;
      animation: rot 3s linear infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<canvas id="canv"></canvas>
         <img id="mplayer" src="https://pic.imgdb.cn/item/64087c20f144a01007c0dc39.jpg" alt="" />
      <span id="lrcbox">When the World Was New</span>
</div>

<script>
let ctx = canv.getContext('2d'),
      w = canv.width = 233,
      h = canv.height = 50,
      lines = [],
      total = 20,
      lineWidth = (w - 2 * total) / total,
      aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1997212832.mp3';
aud.loop = true;
aud.autoplay = true;

aud.addEventListener('timeupdate', change);
canv.onclick = () => aud.paused ? aud.play() : aud.pause();

function Line(x1,y1,x2,y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      lines.push(this);
}

Line.prototype.draw = function() {
      ctx.beginPath();
      ctx.strokeStyle = this.color;
      ctx.lineWidth = lineWidth;
      ctx.moveTo(this.x1, this.y1);
      ctx.lineTo(this.x2,this.y2);
      ctx.stroke();
}

for(let j = 0; j < total; j ++) {
      let line = new Line();
      line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
      line.y1 = h;
      line.x2 = line.x1;
      line.y2 = 60;
      line.color = 'purple';
      line.draw();
}

function change() {
      ctx.clearRect(0,0,w,h);
      for(let item of lines) {
                item.color = '#1e3453' + Math.random().toString(16).substr(-2);
                item.y2 = h - (Math.random() * h);
                item.draw();
      }
}
</script>

马黑黑 发表于 2023-3-8 22:16

新款唱机

醉美水芙蓉 发表于 2023-3-8 23:01

红影 发表于 2023-3-8 23:24

漂亮的频谱，清舟又找到个合适的机器装频谱{:4_173:}

庶民 发表于 2023-3-9 04:45


好方式，有创意！
页: [1]
查看完整版本: When the World Was New