踏人间(DJ沈念版)

马黑黑

我把浏览器设置为不自动播放媒体，默认也是如此。这样，只能空看一个封面了。播放按钮的交互或许还是应该有的：
在 js 代码的最后一行加入一行：

change();

马黑黑

另外，根据封面，左边是水，频谱有倒影，可以考虑将播放示意频谱放在靠左的地方。

加林森

水芙蓉制作得真漂亮。

加林森

醉美水芙蓉 发表于 2022-8-22 22:54
还有很多不足呢？

不急的，我也在学习呢。

马黑黑

醉美水芙蓉 发表于 2022-8-22 22:53
我找了半天没有找到频谱的代码移动位置，频谱如何加粗？还有黑黑老师这个播放器怎样可以加入老师的歌词同 ...

频谱的大小，有两种方式可以改变，都在JS里操作：一是改变画布的宽高为更大，二是改变频谱线条总数。

要加入歌词同步，请加入一个显示歌词的元素，并在监听 timeupdate 事件中加入处理歌词的代码，可参照歌词同步模板改造。

马黑黑

醉美水芙蓉 发表于 2022-8-22 22:53
我找了半天没有找到频谱的代码移动位置，频谱如何加粗？还有黑黑老师这个播放器怎样可以加入老师的歌词同 ...

另外，要改变频谱位置，实际上就是改变画布位置，请在CSS里操作。

红影

水芙蓉也学会了，真棒。帖子做得真漂亮

马黑黑

醉美水芙蓉 发表于 2022-8-23 11:26
虽然我还没有完全领悟，但还是要谢谢黑黑老师如此耐心的指导！论坛有你更精彩！

歌词同步方面我们之前有过教程分享的

马黑黑

醉美水芙蓉 发表于 2022-8-23 22:23
加了啥都没有了？失败了！这就是不懂代码的苦恼！

你去参考一下我再音乐沙龙最新的帖子

马黑黑

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

组合代码不当，修改如下：

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: teal url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/657cfb6f72d2834fa31113c80363dfb7.mp4.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
   
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)); }
   
4. #lrcbox { position: absolute; left: 400px; top: 480px; 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; }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <canvas id="canv"></canvas>
   
9.         <span id="lrcbox">踏人间(DJ沈念版)</span>
   
10. </div>
    
11. 
    
12. <script>
    
13. let ctx = canv.getContext('2d'),
    
14.         w = canv.width =450,
    
15.         h = canv.height = 100,
    
16.         lines = [],
    
17.         total = 80,
    
18.         lineWidth = (w - 2 * total) / total,
    
19.         aud = new Audio();
    
20. let lrcAr = [
    
21.         ['0.00','裂天 - 踏人间 (DJ沈念版)'],
    
22.         ['0.64','词：孙英男'],
    
23.         ['0.96','曲：康兵辉'],
    
24.         ['1.28','OP：昌禾文化'],
    
25.         ['3.28','LRC编辑：醉美水芙蓉'],
    
26.         ['5.76','曾经故人不见应距长安远'],
    
27.         ['6.33','再回首时青山亦难见'],
    
28.         ['10.05','唯见青山不见君'],
    
29.         ['12.94','殚尽红颜如神明'],
    
30.         ['15.91','我欲踏遍人间繁华皆过眼'],
    
31.         ['19.87','快意江湖一笑泯恩怨'],
    
32.         ['23.66','我欲翩翩少年斟酒斗十千'],
    
33.         ['27.82','笙歌妙舞满堂俱欢颜'],
    
34.         ['31.72','我曾踏过人间过往梦如烟'],
    
35.         ['35.78','酒醒花残一朝战火喧'],
    
36.         ['39.72','我曾忘却尘缘似来鸿去燕'],
    
37.         ['43.69','一身轻骨何惧再拔剑'],
    
38.         ['64.37','乱世烽火狼烟塞外黄沙天'],
    
39.         ['68.37','炉上煨酒欲把旧柴添'],
    
40.         ['71.85','月下怅然无言孤衾枕难眠'],
    
41.         ['76.32','奈何岁月已是白头现'],
    
42.         ['80.14','又遇大雪寒年风霜忆旧年'],
    
43.         ['84.29','一杯浊酒化思绪万千'],
    
44.         ['87.84','曾经故人不见应距长安远'],
    
45.         ['92.21','再回首时青山亦难见'],
    
46.         ['95.87','我欲踏遍人间繁华皆过眼'],
    
47.         ['99.92','快意江湖一笑泯恩怨'],
    
48.         ['103.61','我欲翩翩少年斟酒斗十千'],
    
49.         ['107.70','笙歌妙舞满堂俱欢颜'],
    
50.         ['111.71','我曾踏过人间过往梦如烟'],
    
51.         ['115.73','酒醒花残一朝战火喧'],
    
52.         ['119.70','我曾忘却尘缘似来鸿去燕'],
    
53.         ['123.75','一身轻骨何惧再拔剑'],
    
54.         ['144.17','又遇大雪寒年风霜忆旧年'],
    
55.         ['148.28','一杯浊酒化思绪万千'],
    
56.         ['151.77','曾经故人不见应距长安远'],
    
57.         ['156.08','再回首时青山亦难见'],
    
58.         ['159.57','我欲踏遍人间繁华已过眼'],
    
59.         ['163.72','快意江湖一笑泯恩怨'],
    
60.         ['167.61','我欲翩翩少年斟酒斗十千'],
    
61.         ['171.70','笙歌妙舞满堂俱欢颜'],
    
62.         ['175.68','我曾踏过人间过往梦如烟'],
    
63.         ['179.71','酒醒花残一朝战火喧'],
    
64.         ['183.63','我曾忘却尘缘似来鸿去燕'],
    
65.         ['187.84','一身轻骨何惧再拔剑'],
    
66.         ['205.28','谢谢欣赏！']
    
67. ];
    
68. aud.src = 'https://www.qqmc.com/up/kwlink.php?id=223220254&.mp3';
    
69. aud.loop = true;
    
70. aud.autoplay = true;
    
71. 
    
72. aud.addEventListener('timeupdate', () => {
    
73.         change();
    
74.         for(j=0; j<lrcAr.length; j++){
    
75.                 if(aud.currentTime >= lrcAr[j][0]) lrcbox.innerHTML = lrcAr[j][1];
    
76.         }
    
77. });
    
78. 
    
79. canv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
80. 
    
81. function Line(x1,y1,x2,y2) {
    
82.         this.x1 = x1;
    
83.         this.y1 = y1;
    
84.         this.x2 = x2;
    
85.         this.y2 = y2;
    
86.         lines.push(this);
    
87. }
    
88. 
    
89. Line.prototype.draw = function() {
    
90.         ctx.beginPath();
    
91.         ctx.strokeStyle = this.color;
    
92.         ctx.lineWidth = lineWidth;
    
93.         ctx.moveTo(this.x1, this.y1);
    
94.         ctx.lineTo(this.x2,this.y2);
    
95.         ctx.stroke();
    
96. }
    
97. 
    
98. for(let j = 0; j < total; j ++) {
    
99.         let line = new Line();
    
100.         line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
     
101.         line.y1 = h;
     
102.         line.x2 = line.x1;
     
103.         line.y2 = 60;
     
104.         line.color = 'purple';
     
105.         line.draw();
     
106. }
     
107. 
     
108. function change() {
     
109.         ctx.clearRect(0,0,w,h);
     
110.         for(let item of lines) {
     
111.                 item.color = '#' + Math.random().toString(16).substr(-6);
     
112.                 item.y2 = h - (Math.random() * h);
     
113.                 item.draw();
     
114.         }
     
115. }
     
116. change();
     
117. </script>
     

复制代码