canvas画布圆形进度条播放器半拉子项目预览

马黑黑

马黑黑

代码：

1. <canvas id="audCanv" width="400" height="240" style="margin: 20px auto; display: block; background: #333;"></canvas>
   
2. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29999537" autoplay loop></audio>
   
3. 
   
4. <script>
   
5. const ww = audCanv.width, hh = audCanv.height;
   
6. const ctx = audCanv.getContext('2d');
   
7. var _play = 0, _change = 0;
   
8. 
   
9. class Audio {
   
10.         constructor(ctx,config) {
    
11.                 this.ctx = ctx;
    
12.                 this.cf = config;
    
13.                 this.cx = config.w / 2;
    
14.                 this.cy = config.h - config.size / 2 - 20;
    
15.                 this.r = config.size / 2;
    
16.         };
    
17.         drawUi(text,value,flag) {
    
18.                 this.ctx.clearRect(0, 0, this.cf.w, this.cf.h);
    
19.                 this.ctx.lineCap = 'round';
    
20.                 this.ctx.lineWidth = 10;
    
21.                 this.ctx.strokeStyle = 'rgba(192,192,192,.95)';
    
22.                 ctx.beginPath();
    
23.                 this.ctx.arc(this.cx, this.cy, this.r, 0, Math.PI * 2);
    
24.                 this.ctx.stroke();
    
25.                 this.ctx.strokeStyle = 'rgba(255,250,250,.85)';
    
26.                 ctx.beginPath();
    
27.                 this.ctx.arc(this.cx, this.cy, this.r, 1.5 * Math.PI, Math.PI * (2 * value + 1.5));
    
28.                 this.ctx.stroke();
    
29.                 this.ctx.fillStyle = 'rgba(255,250,250,.85)';
    
30.                 if(flag) {
    
31.                         this.ctx.beginPath();
    
32.                         this.ctx.moveTo(this.cx - 10, this.cy - 10);
    
33.                         this.ctx.lineTo(this.cx - 10, this.cy + 10);
    
34.                         this.ctx.lineTo(this.cx + 10, this.cy);
    
35.                         this.ctx.closePath();
    
36.                         this.ctx.fill();
    
37.                 }else{
    
38.                         this.ctx.fillStyle = 'white';
    
39.                         this.ctx.beginPath();
    
40.                         this.ctx.fillRect(this.cx - 10, this.cy - 10, 4, 20);
    
41.                         this.ctx.fillRect(this.cx + 4, this.cy - 10, 4, 20);
    
42.                 }
    
43.                 this.ctx.font = 'normal 13px sans-serif';
    
44.                 this.ctx.textAlign = 'center';
    
45.                 this.ctx.textBaseline = 'middle';
    
46.                 this.ctx.beginPath();
    
47.                 this.ctx.fillText(text, this.cx, this.cy + 35);
    
48.                 this.ctx.fill();
    
49.         };
    
50. };
    
51. 
    
52. var option = {w: ww, h: hh, size: 140};
    
53. var _aud = new Audio(ctx,option);
    
54. _aud.drawUi('00:00/00:00',0,0);
    
55. 
    
56. aud.ontimeupdate = () => {
    
57.         var val = aud.currentTime / aud.duration;
    
58.         var txt = s2m(aud.currentTime) + '/' + s2m(aud.duration);
    
59.         _aud.drawUi(txt, val, aud.paused);
    
60. };
    
61. 
    
62. audCanv.onclick = (e) => {
    
63.         if(_play) aud.paused ? aud.play() : aud.pause();
    
64.         if(_change) {
    
65.                 var deg = Math.atan2(e.offsetY - _aud.cy, e.offsetX - _aud.cx) * 180 / Math.PI;
    
66.                 deg += (e.offsetX < _aud.cx && e.offsetY < _aud.cy) ? 450 : 90;
    
67.                 aud.currentTime = aud.duration * deg / 360;
    
68.         };
    
69. };
    
70. 
    
71. audCanv.onmousemove = (e) => {
    
72.         var _ex = e.offsetX,
    
73.                 _ey = e.offsetY,
    
74.                 _cx = _aud.cx,
    
75.                 _cy = _aud.cy,
    
76.                 r1 = 10,
    
77.                 r2 = _aud.r + 10; //+10: lineWidth
    
78.         if(innerCircle(_ex, _ey, _cx, _cy, r2) && innerCircle(_ex, _ey, _cx, _cy, r2 - 20) === false) {
    
79.                 _change = 1;
    
80.                 _play = 0;
    
81.         } else {
    
82.                 _change = 0;
    
83.                 _play = 0;
    
84.         }
    
85.         if(innerCircle(_ex, _ey, _cx, _cy, r1)) {
    
86.                 _change = 0;
    
87.                 _play = 1;
    
88.         }
    
89.         audCanv.style.cursor = ['default', 'pointer'][_change + _play];
    
90.         audCanv.title = !_change && !_play ? '' : _change ? '调节进度' : aud.paused ? '播放' : '暂停';
    
91. };
    
92. 
    
93. var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;
    
94. var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');
    
95. 
    
96. </script>

复制代码

马黑黑

Math.atan2()，返回从原点 (0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度 (弧度值)，也就是 Math.atan2(y,x)；换言之， math.atan2(y,x) 返回给定的 y 及 x 坐标值的反正切值 atan(y / x)，以弧度为单位，结果是在 -pi 和 pi 之间。我们这里使用它来处理进度条被点击时点击点与进度的关系，通过角度来实现。

在svg相类似的播放器中，我们也用到了这个 Math.atan2()

小辣椒

这个播放器好像以前有这样的样式的，我收藏在最喜欢的播放器之一中

马黑黑

小辣椒 发表于 2024-5-27 12:30
这个播放器好像以前有这样的样式的，我收藏在最喜欢的播放器之一中

容易做的

小辣椒

马黑黑 发表于 2024-5-27 12:40
容易做的

这个播放器做双语歌词用了几次

马黑黑

小辣椒 发表于 2024-5-27 12:43
这个播放器做双语歌词用了几次

挺好用的吧

梦江南

问老师，如果音乐只有0.4左右这个播放器要否调整？

南无月

进来看到一个漂亮的小播。。。我点个赞。。

南无月

马黑黑 发表于 2024-5-27 12:20
Math.atan2()，返回从原点 (0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度 (弧度值)，也就是 Math.at ...

看了一眼烧脑，溜了溜了。。

南无月

半拉子工程，这个名字起得好。。
看上去毛坯可以正常使用，缺点软装

马黑黑

南无月 发表于 2024-5-27 18:02
半拉子工程，这个名字起得好。。
看上去毛坯可以正常使用，缺点软装

马黑黑

南无月 发表于 2024-5-27 18:02
看了一眼烧脑，溜了溜了。。

比较高端的数学知识点

马黑黑

南无月 发表于 2024-5-27 18:01
进来看到一个漂亮的小播。。。我点个赞。。

感谢点赞

马黑黑

梦江南 发表于 2024-5-27 14:12
问老师，如果音乐只有0.4左右这个播放器要否调整？

这个现在还不太合适投入使用环节

南无月

马黑黑 发表于 2024-5-27 18:06
感谢点赞

天经地义的事儿不用费劲儿谢

南无月

马黑黑 发表于 2024-5-27 18:06
比较高端的数学知识点

那我就放心的忽略了，反正看不懂

南无月

马黑黑 发表于 2024-5-27 18:05

等精装

马黑黑

南无月 发表于 2024-5-27 20:08
那我就放心的忽略了，反正看不懂

需要至少大学本科五年的学历

马黑黑

南无月 发表于 2024-5-27 20:08
等精装

出来了，回家看看去