在canvas画布上用线条做频谱播放器

马黑黑

代码及解释如下：

1. <style>
   
2. #canv { position: absolute; cursor: pointer; }
   
3. </style>
   
4. 
   
5. <canvas id="canv"></canvas>
   
6. 
   
7. <script>
   
8. let ctx = canv.getContext('2d'), //画笔
   
9.         w = canv.width = 80, //画布宽度
   
10.         h = canv.height = 60, //画布高度
    
11.         lines = [], //线条数组
    
12.         total = 10, //线条总数
    
13.         lineWidth = (w - 2 * total) / total, //线条厚度
    
14.         aud = new Audio(); //播放器
    
15. 
    
16. aud.src = 'https://music.163.com/song/media/outer/url?id=16434054.mp3'; //音乐地址
    
17. aud.loop = true; //循环播放
    
18. aud.autoplay = true; //自动播放
    
19. 
    
20. aud.addEventListener('timeupdate', change); //监听播放进度 ：驱动频谱
    
21. canv.onclick = () => aud.paused ? aud.play() : aud.pause(); //画布单击事件 ：控制暂停、播放
    
22. 
    
23. //创建线条对象 ：以便批量处理
    
24. function Line(x1,y1,x2,y2) {
    
25.         this.x1 = x1;
    
26.         this.y1 = y1;
    
27.         this.x2 = x2;
    
28.         this.y2 = y2;
    
29.         lines.push(this); //加入 lines 数组
    
30. }
    
31. 
    
32. //线条对象的绘制函数
    
33. Line.prototype.draw = function() {
    
34.         ctx.beginPath(); //开启路径
    
35.         ctx.strokeStyle = this.color; //绘制颜色
    
36.         ctx.lineWidth = lineWidth; //画笔粗细 ：等于线条厚度
    
37.         ctx.moveTo(this.x1, this.y1); //移动画笔到 x1、y1位置
    
38.         ctx.lineTo(this.x2,this.y2); //绘制线条到 x2、y2
    
39.         ctx.stroke(); //上色
    
40. }
    
41. 
    
42. // 批量生成并绘制线条
    
43. for(let j = 0; j < total; j ++) { //按预设线条总数
    
44.         let line = new Line(); //建立Line对象实例 line
    
45.         line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1; //实例 line 的x1 ：其算法令每个线条拉开一定距离
    
46.         line.y1 = h; //y1等于画布高度
    
47.         line.x2 = line.x1; //x2等于x1
    
48.         line.y2 = 50; //y2 ：这个值后面会动态变化，这里是为不支持自动播放准备一个统一的高度
    
49.         line.color = '#' + Math.random().toString(16).substr(-6); //首次出现的随机颜色：后面还会变化
    
50.         line.draw(); //绘制线条
    
51. }
    
52. 
    
53. //线条动态变化函数
    
54. function change() {
    
55.         ctx.clearRect(0,0,canv.width,canv.height); //每次刷新清除一次画布
    
56.         for(let item of lines) { //线条数组每个元素
    
57.                 item.color = '#' + Math.random().toString(16).substr(-6); //随机得到16进制颜色
    
58.                 item.y2 = h - (Math.random() * h); //y2随机值 ：高度减去(0至0.999...)*高度
    
59.                 item.draw(); //绘制线条
    
60.         }
    
61. }
    
62. </script>

复制代码

马黑黑

效果如下。说明：由于有些浏览器设置问题，不支持媒体的自动播放，若此，此播放器仅凭监听 timeupdate 事件驱动频谱会有问题，播放器不会出现。故此，我们需要首次运行一次函数 change() ，可以放在 JS 代码的最后一行:

change();

马黑黑

如果需要倒影，可在 #canv {} 加入：

-webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3));

但火狐至今仍不支持 box-reflect

红影

画布也能做频谱播放器，这个好

马黑黑

红影 发表于 2022-8-21 18:34
画布也能做频谱播放器，这个好

这个也不用担心背景问题

红影

line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1; 这个没看懂，为什么是这样的算法？

马黑黑

红影 发表于 2022-8-21 18:54
line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1; 这个没看懂，为什么是这样的算法？

这个算法，基于x1，就是画笔要画一根线条前移动到的位置，也是线条的起始{x,y}坐标值的x值。

线是横向排列的。线有厚度，所以，① 基于起点X坐标，第 j 根线必须在 j*lineWidth；② 我想每根线拉开一定距离，且头尾两根线不贴合边缘，那么，根据前面 lineWidth 的定义，即（画布宽度 - 2 * 线条总数）/线条总数 的定义，再加 j*2 + lineWidth / 2 + 1。如此，便能均匀地把 total 根线横向安置在画布里。不这样做处理，线条会挤在一起，甚至会在同一个地方重复画线条。

这是算法，有些算法是根据上下文进行具体应对的。

马黑黑

醉美水芙蓉 发表于 2022-8-21 20:09
欣赏学习黑黑老师新教材！

加林森

学习学习

红影

马黑黑 发表于 2022-8-21 20:03
这个算法，基于x1，就是画笔要画一根线条前移动到的位置，也是线条的起始{x,y}坐标值的x值。

线是横向 ...

嗯，怪不得线宽的取值也用了算法，而不是直接赋值。谢谢黑黑解答

马黑黑

红影 发表于 2022-8-22 16:19
嗯，怪不得线宽的取值也用了算法，而不是直接赋值。谢谢黑黑解答

不考虑画布尺寸的话，也可以直接赋值的

红影

马黑黑 发表于 2022-8-22 17:03
不考虑画布尺寸的话，也可以直接赋值的

如果直接复制，后面的间隔的算法也要更改了吧？

马黑黑

红影 发表于 2022-8-22 21:10
如果直接复制，后面的间隔的算法也要更改了吧？

一般来说总要有个算法，像x1，它是排列线条的依据，每根线条必须在前一根的右边不远处。

红影

马黑黑 发表于 2022-8-22 21:31
一般来说总要有个算法，像x1，它是排列线条的依据，每根线条必须在前一根的右边不远处。

嗯嗯，否则就无法均匀排布了。

马黑黑

红影 发表于 2022-8-23 15:52
嗯嗯，否则就无法均匀排布了。

是的

红影

马黑黑 发表于 2022-8-23 17:24
是的

等消暑完了，我也来学做个

马黑黑

红影 发表于 2022-8-23 21:12
等消暑完了，我也来学做个

挺好