论坛 › 音乐沙龙 › 天鹅湖-TO小辣椒

绿叶清舟 发表于 2023-2-25 10:53

天鹅湖-TO小辣椒

<style>
#papa { left: -255px; /*margin: auto;*/ width: 1100px; height: 700px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/63f8b37cf144a01007952a92.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 30px;left: 258px; 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: 15px; 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; }
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <span id="lrcbox">天鹅湖-TO小辣椒</span>
</div>

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

aud.src = 'https://music.163.com/song/media/outer/url?id=1360505408.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 = '#abbfc6' + Math.random().toString(16).substr(-2);
                item.y2 = h - (Math.random() * h);
                item.draw();
      }
}
</script>

梦缘 发表于 2023-2-25 11:02

美的享受，欣赏点赞！{:4_187:}

红影 发表于 2023-2-25 11:06

歌曲很清净，好听。那个频谱还能暂停，把频谱放到播放机里，这个有趣。清舟制作漂亮，小辣椒亲爱的收礼开心{:4_187:}

醉美水芙蓉 发表于 2023-2-25 11:42

梦油 发表于 2023-2-25 13:45

我还以为是《四个小天鹅》呢。

海笑 发表于 2023-2-25 14:20

欣赏老师佳作！

小辣椒 发表于 2023-2-25 18:05

啊~~~清舟你太厉害了，这个频谱好像是直接代码制作的{:4_178:}

小辣椒 发表于 2023-2-25 18:05

吃饭前上来发帖，来不及仔细欣赏，晚上继续上来好好欣赏

小辣椒 发表于 2023-2-25 18:06

谢谢清舟的礼物，太美了{:4_179:}

樵歌 发表于 2023-2-25 19:09

脑洞大开创意无限，没有做不到的只有想不到的{:4_173:}

小辣椒 发表于 2023-2-25 20:08

清舟代码运用很自如，这个频谱这样做很漂亮的

谢谢清舟的好制作，小辣椒也是学习了{:4_178:}

马黑黑 发表于 2023-2-25 20:20

好瘦的鹅鹅

马黑黑 发表于 2023-2-25 20:20

{:4_206:}

绿叶清舟 发表于 2023-2-25 20:26

马黑黑 发表于 2023-2-25 20:20
好瘦的鹅鹅

肉被你下酒了啊{:4_189:}

马黑黑 发表于 2023-2-25 20:29

绿叶清舟 发表于 2023-2-25 20:26
肉被你下酒了啊

哪里的话？俺粗茶淡饭

绿叶清舟 发表于 2023-2-25 20:32

马黑黑 发表于 2023-2-25 20:29
哪里的话？俺粗茶淡饭

下酒的不是茶也不是饭啊

绿叶清舟 发表于 2023-2-25 20:37

小辣椒 发表于 2023-2-25 20:08
清舟代码运用很自如，这个频谱这样做很漂亮的

谢谢清舟的好制作，小辣椒也是学习了

辣椒不客气了，就是加了个颜色的

马黑黑 发表于 2023-2-25 20:37

绿叶清舟 发表于 2023-2-25 20:32
下酒的不是茶也不是饭啊

没钱就是了

绿叶清舟 发表于 2023-2-25 20:37

海笑 发表于 2023-2-25 14:20
欣赏老师佳作！

谢谢海笑

绿叶清舟 发表于 2023-2-25 20:37

小辣椒 发表于 2023-2-25 18:05
啊~~~清舟你太厉害了，这个频谱好像是直接代码制作的

这个就是马黑的频谱播放器的

查看完整版本: 天鹅湖-TO小辣椒