朵拉 发表于 2022-8-27 22:58

唯 一（马黑黑原创）

本帖最后由 朵拉 于 2022-8-28 00:11 编辑 <br /><br /><style>
#papa { left: -214px; /*margin: auto;*/ width: 1024px; height: 640px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/630a2e5c16f2c2beb1c61066.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 100px; left: 260px;


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: darkgreen; 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">唯 一</span>
</div>


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

aud.src='http://www.kumeiwp.com/sub/filestores/2022/02/23/51a5766edd9b702ec37a4359625e36bf.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 = '#' + Math.random().toString(16).substr(-6);
                item.y2 = h - (Math.random() * h);
                item.draw();
      }
}

change();
</script>

朵拉 发表于 2022-8-27 22:58

@马黑黑
马老师 晚上好，学生的播放器找不到了{:4_195:}

加林森 发表于 2022-8-27 23:12

朵拉 发表于 2022-8-27 22:58
@马黑黑
马老师 晚上好，学生的播放器找不到了

小朵拉你刷新啊！

朵拉 发表于 2022-8-27 23:14

加林森 发表于 2022-8-27 23:12
小朵拉你刷新啊！

森队好，我手机党 刷新也木有播放器{:4_203:}

马黑黑 发表于 2022-8-27 23:15

朵拉 发表于 2022-8-27 22:58
@马黑黑
马老师 晚上好，学生的播放器找不到了

没有问题的

马黑黑 发表于 2022-8-27 23:17

朵拉 发表于 2022-8-27 22:58
@马黑黑
马老师 晚上好，学生的播放器找不到了

考虑到不同浏览器对自动播放的支持，你需要在JS代码的最后一行，即 </script>的上面，加入一句就可以了：

change();

加林森 发表于 2022-8-27 23:22

朵拉 发表于 2022-8-27 23:14
森队好，我手机党 刷新也木有播放器

我现在也是手机的。

朵拉 发表于 2022-8-27 23:30

马黑黑 发表于 2022-8-27 23:17
考虑到不同浏览器对自动播放的支持，你需要在JS代码的最后一行，即 的上面，加入一句就可以了：

chang ...

马师，播放器显示出来了，但是点不动 木有音乐{:4_195:}

马黑黑 发表于 2022-8-27 23:35

本帖最后由 马黑黑 于 2022-8-27 23:36 编辑

朵拉 发表于 2022-8-27 23:30
马师，播放器显示出来了，但是点不动 木有音乐
我这里是正常的。估计与音乐链接有关，你那里刚好不能正常下载音乐。

朵拉 发表于 2022-8-27 23:38

马黑黑 发表于 2022-8-27 23:35
我这里是正常的。估计与音乐链接有关，你那里刚好不能正常下载音乐。

音乐放一放，播放器往石头上方挪一挪，怎么调整{:4_190:}

马黑黑 发表于 2022-8-27 23:54

朵拉 发表于 2022-8-27 23:38
音乐放一放，播放器往石头上方挪一挪，怎么调整

在CSS改变 #canv 的位置：

#canv { position: absolute; bottom: 30px; ...

bottom 值指离底线的距离，需要修改调试；还有加 left 值，表示离左边线的距离，也需要修改调试：

#canv { position: absolute; bottom: 30px; left: 40px; ...

加林森 发表于 2022-8-28 00:18

朵拉，快去休息了，明天再来玩！

马黑黑 发表于 2022-8-28 06:57

嗯，频谱放在石头上的确是个好创意。

朵朵用手机做帖，可不容易的

红影 发表于 2022-8-28 08:51

这个频谱的位置选择很棒，欣赏朵宝好帖{:4_187:}
页: [1]
查看完整版本: 唯 一（马黑黑原创）