加林森 发表于 2022-8-22 09:43

《舒适的雨声》（纯自然声）

本帖最后由 加林森 于 2022-8-22 19:00 编辑 <br /><br /><style>
#papa { left: -214px; /*margin: auto;*/ width: 1024px; height: 701px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/6302de5f16f2c2beb1bac0cd.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 30px; 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)); } border: 1px solid;
#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 = 40,
      lines = [],
      total = 20,
      lineWidth = (w - 2 * total) / total,
      aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=1840665571.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 = 40;
      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();
      }
}
</script>

加林森 发表于 2022-8-22 09:45

@马黑黑   学习你的线条制作播放器。谢谢老黑！

樵歌 发表于 2022-8-22 10:24

没有小黑那个转圈的彩条好看哈。{:4_173:}

加林森 发表于 2022-8-22 10:26

樵歌 发表于 2022-8-22 10:24
没有小黑那个转圈的彩条好看哈。

这个是两码事。不是一样的，这个是播放器。

红影 发表于 2022-8-22 10:51

先来欣赏队长的街头雨景，等晚上再来欣赏音乐{:4_187:}

加林森 发表于 2022-8-22 10:53

红影 发表于 2022-8-22 10:51
先来欣赏队长的街头雨景，等晚上再来欣赏音乐

要得要得。

马黑黑 发表于 2022-8-22 11:11

这个是线条频谱。频谱线可以自己定义的，不一定和我的设置一样。

加林森 发表于 2022-8-22 11:16

马黑黑 发表于 2022-8-22 11:11
这个是线条频谱。频谱线可以自己定义的，不一定和我的设置一样。

先这样了。等熟悉了再去改一改。

马黑黑 发表于 2022-8-22 12:20

加林森 发表于 2022-8-22 11:16
先这样了。等熟悉了再去改一改。

我只是建议，你看着办。我的进一步的建议是，你可以参考一下红影、小辣椒、粥粥等的做法，他们都不是简单的模仿，也不求快，能做出有创造成分的优美作品。

加林森 发表于 2022-8-22 12:28

马黑黑 发表于 2022-8-22 12:20
我只是建议，你看着办。我的进一步的建议是，你可以参考一下红影、小辣椒、粥粥等的做法，他们都不是简单 ...

嗯嗯。明白你的意思。谢谢了！

小辣椒 发表于 2022-8-22 17:45

队长直接套用了{:4_189:}

加林森 发表于 2022-8-22 17:51

小辣椒 发表于 2022-8-22 17:45
队长直接套用了

只是修改了一点数字。

小辣椒 发表于 2022-8-22 17:53

加林森 发表于 2022-8-22 17:51
只是修改了一点数字。

播放器修改了？频谱的粗细感觉没有变

加林森 发表于 2022-8-22 17:59

小辣椒 发表于 2022-8-22 17:53
播放器修改了？频谱的粗细感觉没有变

改了高度的。

小辣椒 发表于 2022-8-22 18:09

加林森 发表于 2022-8-22 17:59
改了高度的。

哦，有点修改就可以，至少领会了，我都还没有做的，向队长学习。。。{:4_187:}

加林森 发表于 2022-8-22 18:10

小辣椒 发表于 2022-8-22 18:09
哦，有点修改就可以，至少领会了，我都还没有做的，向队长学习。。。

嗯嗯。我改小了点的。

东篱闲人 发表于 2022-8-22 18:48

催眠音乐，净心。{:4_187:}

加林森 发表于 2022-8-22 19:03

东篱闲人 发表于 2022-8-22 18:48
催眠音乐，净心。

直接整睡着。{:4_189:}

东篱闲人 发表于 2022-8-22 19:49

加林森 发表于 2022-8-22 19:03
直接整睡着。

{:4_181:}

加林森 发表于 2022-8-22 19:50

东篱闲人 发表于 2022-8-22 19:49


{:4_172:}
页: [1] 2
查看完整版本: 《舒适的雨声》（纯自然声）