童安格 -耶利亚女郎

马黑黑

马黑黑

本帖测试昨晚写的纯canvas画布播放器，代码尚未优化。完整源码分享如下：

1. <style>
   
2.         #papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: gray url('https://638183.freep.cn/638183/t22/hl/tong.webp') no-repeat center/cover; position: relative; z-index: 1; }
   
3.         #mypic { position: absolute; top: 125px; right: 100px; width: 260px; transform: rotate(30deg); cursor: pointer; transition: all 2s; }
   
4.         #mypic:hover { box-shadow: -10px -10px 40px 10px rgba(255,255,255,.45); transform: scale(1.5); }
   
5.         #player { margin: auto; display: block; position: absolute; }
   
6. </style>
   
7. 
   
8. <div id="papa">
   
9.         <canvas id="player"></canvas>
   
10.         <img id="mypic" src="https://638183.freep.cn/638183/t22/hl/yly.webp" alt="" />
    
11. </div>
    
12. 
    
13. <script>
    
14. let ctx = player.getContext('2d'),
    
15.         w = player.width = 350, h = player.height = 100,
    
16.         startX = 30, startY = 70, radius = 16,
    
17.         flag = false,
    
18.         color = { lrc: 'lightblue', time: 'lightblue', track: '#ccc', prg: 'red', circle: 'lightblue', btn: 'snow', btnhover: 'red' };
    
19.         aud = new Audio();
    
20. let lrcAr = [
    
21.         ['0.01','童安格  耶利亚女郎'],
    
22.         ['34.10','很远的地方有个女郎  名字叫做耶利亚'],
    
23.         ['42.33','有人在传说她的眼睛  看了使人更年轻'],
    
24.         ['50.62','如果你得到她的拥抱  你就永远不会老'],
    
25.         ['59.15','为了这个神奇的传说  我要努力去寻找'],
    
26.         ['66.42','耶利亚神秘耶利亚  耶利耶利亚'],
    
27.         ['74.77','耶利亚神秘耶利亚  我一定要找到她'],
    
28.         ['101.12','很远的地方有个女郎  名字叫做耶利亚'],
    
29.         ['109.32','有人在传说她的眼睛  看了使人更年轻'],
    
30.         ['117.90','如果你得到她的拥抱  你就永远不会老'],
    
31.         ['126.22','为了这个神奇的传说  我要努力去寻找'],
    
32.         ['133.57','耶利亚神秘耶利亚  耶利耶利亚'],
    
33.         ['141.90','耶利亚神秘耶利亚  我一定要找到她'],
    
34.         ['150.29','耶利亚神秘耶利亚  耶利耶利亚'],
    
35.         ['158.76','耶利亚神秘耶利亚  我一定要找到她'],
    
36.         ['198.70','耶利亚神秘耶利亚  耶利耶利亚'],
    
37.         ['207.11','耶利亚神秘耶利亚  我一定要找到她'],
    
38.         ['215.28','耶利亚神秘耶利亚  耶利耶利亚'],
    
39.         ['223.72','耶利亚神秘耶利亚  我一定要找到她']
    
40. ];
    
41. 
    
42. aud.src = 'https://music.163.com/song/media/outer/url?id=150852.mp3';
    
43. aud.autoplay = true;
    
44. aud.loop = true;
    
45. 
    
46. drawBtn(aud.paused);
    
47. drawProgress(2, '00:00');
    
48. drawLrc('等待播放 ...');
    
49. 
    
50. let isHover = (x, y, cx, cy) => Math.pow(x - cx, 2) + Math.pow(y - cy, 2) <= Math.pow(radius, 2); //鼠标经过检测
    
51. 
    
52. player.addEventListener('mousemove', (e) => { //监听鼠标经过
    
53.         flag = isHover(e.offsetX, e.offsetY, startX, startY);
    
54.         if(flag) {
    
55.                 player.style.cursor = 'pointer';
    
56.                 drawBtn(aud.paused);
    
57.         } else {
    
58.                 player.style.cursor = 'default';
    
59.                 drawBtn(aud.paused);
    
60.         }
    
61. });
    
62. 
    
63. player.addEventListener('click', (e) => { if(flag) aud.paused ? aud.play() : aud.pause(); });
    
64. 
    
65. aud.addEventListener('playing',()  => drawBtn(false));
    
66. aud.addEventListener('pause',()  => drawBtn(true));
    
67. 
    
68. aud.addEventListener('timeupdate', () => { //进度监听
    
69.         let prg = 100 * aud.currentTime / aud.duration;
    
70.         drawProgress(2*prg, toMin(aud.duration) + ' | ' + toMin(aud.currentTime));
    
71.         for(j = 0; j < lrcAr.length;  j ++) {
    
72.                 if(aud.currentTime >= lrcAr[j][0]) drawLrc(lrcAr[j][1]);
    
73.         }
    
74. });
    
75. 
    
76. function drawLrc(text) { //lrc同步
    
77.         ctx.clearRect(0, 0, w, 50);
    
78.         ctx.save();
    
79.         ctx.fillStyle = color.lrc;
    
80.         ctx.textAlign = 'center';
    
81.         ctx.beginPath();
    
82.         ctx.font = '1.2em sans-serif';
    
83.         ctx.fillText(text, w/2, 30);
    
84.         ctx.fill();
    
85.         ctx.restore();
    
86. }
    
87. 
    
88. function drawProgress(prog, text) { //进度
    
89.         ctx.clearRect(startX + radius + 202, startY - 10, startX + radius + 206 + ctx.measureText(text).width, 40);
    
90.         ctx.beginPath();
    
91.         ctx.font = '14px sans-serif';
    
92.         ctx.textBaseline = 'middle';
    
93.         ctx.strokeStyle = color.track;
    
94.         ctx.moveTo(startX + radius + 4, startY);
    
95.         ctx.lineTo(startX + radius + 204, startY); //底线
    
96.         ctx.stroke();
    
97.         ctx.beginPath();
    
98.         ctx.strokeStyle = color.prg;
    
99.         ctx.moveTo(startX + radius + 4, startY);
    
100.         ctx.lineTo(startX + radius + 4 + prog, startY); //进度线
     
101.         ctx.stroke();
     
102.         ctx.fillStyle = color.time;
     
103.         ctx.fillText(text, startX + radius + 208, startY); //数字进度
     
104.         ctx.fill();
     
105. }
     
106. 
     
107. function drawBtn(id) { //绘制播放+暂停按钮
     
108.         ctx.clearRect(startX - radius, startY - radius, radius *2, radius*2);
     
109.         ctx.fillStyle = color.circle;
     
110.         ctx.beginPath();
     
111.         ctx.arc(startX, startY, radius, 0, 2*Math.PI);
     
112.         ctx.fill();
     
113.         ctx.fillStyle = flag ? color.btnhover : color.btn;
     
114.         ctx.beginPath();
     
115.         if (id) { //播放图标
     
116.                 ctx.lineWidth = 1;
     
117.                 ctx.moveTo(startX-radius / 2 + 1, startY - radius / 2);
     
118.                 ctx.lineTo(startX - radius / 2 + 1, startY + radius / 2);
     
119.                 ctx.lineTo(startX + radius / 2 + 1, startY);
     
120.                 ctx.fill();
     
121.         } else { //暂停图标
     
122.                 ctx.fillRect(startX - radius / 2 + 5, startY - radius / 2, 2, radius);
     
123.                 ctx.fillRect(startX - radius / 2 + 10, startY - radius / 2, 2, radius);
     
124.         }
     
125. }
     
126. 
     
127. function toMin(val) {
     
128.         if(!val) return '00:00';
     
129.         val = Math.floor(val);
     
130.         let min = parseInt(val / 60);
     
131.         let sec = parseFloat(val % 60);
     
132.         if(min < 10) min = '0' + min;
     
133.         if(sec < 10) sec = '0' + sec;
     
134.         return min + ':' + sec;
     
135. }
     
136. </script>

复制代码

马黑黑

JS代码全是基于canvas画布播放器。如果使用此播放器，color 实例化对象变量是修改播放器按钮文本等颜色的关键，应根据不同情境修改。现解释一下基于实例对象的 color 变量的键值对含义。原变量写成一行，为了方便解释，我们把它拆行：

color = {
        lrc: 'lightblue', //歌词颜色
        time: 'lightblue',//时间信息颜色
        track: '#ccc', //进度轨道颜色
        prg: 'red', //进度颜色
        circle: 'lightblue', //按钮圆圈颜色
        btn: 'snow', //播放暂停按钮颜色
        btnhover: 'red' //播放暂停按钮鼠标经过颜色
};

马黑黑

写完后用了三种浏览器进行测试：最新版火狐、最新版edge（基于chromium）、最新版百分浏览器（基于较老版本的chromium），允许自动播放与否均能通过。但毕竟刚完成，代码一没有优化、精简，二没有仔细审核，不足与错误在所难免。

此外，用canvas画布做这个，代码量大一点是难以避免的，因为canvas的操作本身就是很琐碎的，每画一个东西都需要定义画笔相关属性，本来时女生才能干好的细活，俺一个大男人笨手笨脚，驱动画布的确是个磨炼。

马黑黑

canvas画布是HTML的一个元素，在CSS中定义好position后，可以随意安排在帖子中任何位置。本帖将画布按默认方式摆放在左上角，其背景透明（默认），尺寸在JS中设置：

w = player.width = 350, h = player.height = 100,

加林森

手机可以听见。

加林森

电脑也没有问题。

马黑黑

醉美水芙蓉 发表于 2022-8-26 11:47
黑黑老师做贴辛苦了！论坛有你更精彩！

小辣椒

原来黑黑已经分享教程了，黑神你太厉害了

小辣椒

马黑黑 发表于 2022-8-26 07:17
JS代码全是基于canvas画布播放器。如果使用此播放器，color 实例化对象变量是修改播放器按钮文本等颜色的关 ...

这个播放器是设置画布里面的，明白了，今天晚上不晓得可以不可以做出来，反正播放器我喜欢捣鼓的

小辣椒

马黑黑 发表于 2022-8-26 07:25
写完后用了三种浏览器进行测试：最新版火狐、最新版edge（基于chromium）、最新版百分浏览器（基于较老版本 ...

代码量大是黑黑辛苦，我们套用一样的

小辣椒

马黑黑 发表于 2022-8-26 07:30
canvas画布是HTML的一个元素，在CSS中定义好position后，可以随意安排在帖子中任何位置。本帖将画布按默认 ...

明白了，谢谢黑黑，争取今天完成

红影

画布还真是什么都能做，黑黑太厉害了

红影

全部是画出来，太不容易了。黑黑还加个mypic的鼠标操控，更不容易看懂了啊

青青子衿

小马黑黑老师，讲解的很清楚明了。。。。

青青子衿

如果你得到她的拥抱，你就永远不会老。。。这是男们的梦想。。。。俺梦想，能骑着女巫的大扫把，提着阿拉丁神灯，夜里和星星月亮握个手

马黑黑

青青子衿 发表于 2022-8-26 17:10
小马黑黑老师，讲解的很清楚明了。。。。

不过这个不是最终版本，还在改进中，在我的花园有一个比这好的版本

马黑黑

小辣椒 发表于 2022-8-26 15:08
原来黑黑已经分享教程了，黑神你太厉害了

进度可控的版本等我折磨一下，争取今晚发出来

马黑黑

青青子衿 发表于 2022-8-26 17:14
如果你得到她的拥抱，你就永远不会老。。。这是男们的梦想。。。。俺梦想，能骑着女巫的大扫把，提着阿拉丁 ...

要做巫婆呀