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

《相思的雨》- 门丽 / 笑天

本帖最后由 加林森 于 2022-8-25 17:47 编辑 <br /><br /><style>
#papa { left: -214px; /*margin: auto;*/ width: 1024px; height: 576px; display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/6302e65816f2c2beb1be3479.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 100px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 100%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
#lrcbox { position: absolute; left: 25px; 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=403012523.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();
      }
}
change();
</script>

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

歌词：

作词 : 笑天
作曲 : 笑天

女：我和你走在熟悉的街头
是缘份让我和你邂逅
从此我爱上你把你放在心底
想你的每一次呼吸


男：红尘中和你一起手牵手
享受着你给我的温柔
每一言每一语 都是那么熟悉
让我今生无法忘记


女：今夜又下雨
滴落在我心里
男：和你走过的回忆
谱写成爱的旋律

女：今夜又想你
让我无法睡去
男：漫天纷飞的思绪
为你化作相思的雨

女：我和你走在熟悉的街头
是缘份让我和你邂逅
从此我爱上你把你放在心底
想你的每一次呼吸


男：红尘中和你一起手牵手
享受着你给我的温柔
每一言每一语 都是那么熟悉
让我今生无法忘记


女：今夜又下雨
滴落在我心里
男：和你走过的回忆
谱写成爱的旋律

女：今夜又想你
让我无法睡去
男：漫天纷飞的思绪
为你化作相思的雨
男：漫天纷飞的思绪
为你化作相思的雨

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

一评分那线条就丢啦{:4_203:}

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

樵歌 发表于 2022-8-22 10:54
一评分那线条就丢啦

一刷新又有了。

红影 发表于 2022-8-22 12:05

又是频谱效果吧，先来占位，等回家再欣赏{:4_187:}

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

红影 发表于 2022-8-22 12:05
又是频谱效果吧，先来占位，等回家再欣赏

好的好的。

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

队长最好不要同样的直接套用，你这个播放器移动一下位子也是好的啊

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

小辣椒 发表于 2022-8-22 17:46
队长最好不要同样的直接套用，你这个播放器移动一下位子也是好的啊

对的。你说得太对了。

樵歌 发表于 2022-8-22 20:37

加林森 发表于 2022-8-22 10:58
一刷新又有了。

但听歌重开始，我急计性子{:4_173:}

加林森 发表于 2022-8-22 20:41

樵歌 发表于 2022-8-22 20:37
但听歌重开始，我急计性子

{:4_172:}

东篱闲人 发表于 2022-8-22 20:53

好听的歌，加加多情。。。{:5_116:}

加林森 发表于 2022-8-22 20:55

东篱闲人 发表于 2022-8-22 20:53
好听的歌，加加多情。。。

门丽唱得好听。{:4_189:}

醉美水芙蓉 发表于 2022-8-22 21:01

马黑黑 发表于 2022-8-22 21:06

队长，@小辣椒 刚发现一个问题：浏览器不自动播放时，我这个画布频谱不出界面，从而失去与用户交互的机会。为确保界面出现，在在JS代码的最后一行加入（红色那句）：

<script>
//前面的代码
change();
</script>

马黑黑 发表于 2022-8-22 21:07

图美乐美。赞一个。

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

马黑黑 发表于 2022-8-22 21:06
队长，@小辣椒 刚发现一个问题：浏览器不自动播放时，我这个画布频谱不出界面，从而失去与用户交互的机会。 ...

好的，我等一下再去试一下

马黑黑 发表于 2022-8-22 21:30

小辣椒 发表于 2022-8-22 21:17
好的，我等一下再去试一下

我那个帖子已经修正过了的

小辣椒 发表于 2022-8-22 21:40

马黑黑 发表于 2022-8-22 21:30
我那个帖子已经修正过了的

你啊我直接用你的教程分享

马黑黑 发表于 2022-8-22 21:42

小辣椒 发表于 2022-8-22 21:40
你啊我直接用你的教程分享

教程的二楼我也有说明的

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

马黑黑 发表于 2022-8-22 21:06
队长，@小辣椒 刚发现一个问题：浏览器不自动播放时，我这个画布频谱不出界面，从而失去与用户交互的机会。 ...

好的。我等下就去修改。谢谢老黑！
页: [1] 2
查看完整版本: 《相思的雨》- 门丽 / 笑天