《梦驼铃》常规模式封装及模板说明

马黑黑

《梦驼铃》常规模式封装及模板说明 | 马黑黑

所谓常规封装，指“div+svg”的封装模式，将svg重组、固化，使用者无需对svg做过多的设计，把svg元素当成普通的HTML元素操作即可。下面是代码，随后是一些必要说明。

1. <style>
   
2.         #papa {  margin: auto; width: 1024px; height: 600px; background: silver url('../pic/213.jpg') no-repeat center/cover; box-shadow: 2px 2px 10px #000; user-select: none; z-index: 1; position: relative; }
   
3.         #mplayer { position: absolute; right: 20px; bottom: 20px; }
   
4.         #lrc {position: absolute; left: 20px; top: 10px; }
   
5.         #lrctext { font: bold 2em sans-serif; text-shadow: 4px 4px 0 #000; stroke-width: 0.5px; stroke: snow; fill: none; letter-spacing: 4px; }
   
6.         #tmsg { fill: transparent; stroke: gray; stroke-width: 1px; font: bold 1em sans-serif; }
   
7.         #btnplay, #btnpause { fill: #ccc; cursor: pointer; display: block; }
   
8.         #btnpause { display: none; }
   
9.         #btnplay:hover, #btnpause:hover { fill: orange; }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.         <svg id="mplayer" width="120" height="120">
    
14.                 <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
    
15.                         <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(255,255,255,0.65)" />
    
16.                         <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="6" stroke="rgba(57,54,81,0.85)" />
    
17.                 </g>
    
18.                 <polygon id="btnplay" points="50 50, 50 70, 70 60" />
    
19.                 <g id="btnpause" fill="tranparent">
    
20.                         <rect x="52" y="50" width="5" height="20" />
    
21.                         <rect x="62" y="50" width="5" height="20" />
    
22.                 </g>
    
23.                 <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
    
24.                 <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
    
25.                 <g id="tmsg">
    
26.                         <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
    
27.                         <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
    
28.                 </g>
    
29.         </svg>
    
30.         <svg id="lrc" width="600" height="50">
    
31.                 <text id="lrctext" x="0" y="40">梦驼铃</text>
    
32.         </svg>
    
33. </div>
    
34. 
    
35. <script>
    
36. let aud = new Audio();
    
37. let lrcAr = [
    
38.         ['0.00', '纯音乐 - 梦驼铃'],
    
39.         ['300.00', '感谢支持']
    
40. ];
    
41. let cc = {
    
42.         x: 1*track.getAttribute('cx'),
    
43.         y: 1*track.getAttribute('cy'),
    
44.         r: 1*track.getAttribute('r'),
    
45.         sw: 1*track.getAttribute('stroke-width'),
    
46.         len: track.getTotalLength(),
    
47. };
    
48. 
    
49. aud.src = 'https://music.163.com/song/media/outer/url?id=1911002130.mp3';
    
50. aud.autoplay = true;
    
51. aud.loop = true;
    
52. prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
    
53. 
    
54. aud.addEventListener('pause', () => btnstate());
    
55. aud.addEventListener('play',() => btnstate());
    
56. 
    
57. aud.addEventListener('timeupdate', () => {
    
58.         prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;
    
59.         curMsg.textContent = toMin(aud.currentTime);
    
60.         durMsg.textContent = toMin(aud.duration);
    
61.         for(j=0; j<lrcAr.length; j++) {
    
62.                 if(aud.currentTime >= lrcAr[j][0]) lrctext.textContent = lrcAr[j][1];
    
63.         }
    
64. });
    
65. 
    
66. btnplay.onclick = btnpause.onclick = () => aud.paused ? aud.play() : aud.pause();
    
67. 
    
68. mama.onclick = (e) => {
    
69.         let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
    
70.         deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
    
71.         aud.currentTime = aud.duration * deg / 360;
    
72. };
    
73. 
    
74. let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
    
75. 
    
76. let toMin = (val)  => {
    
77.         if (!val) return '00:00';
    
78.         val = Math.floor(val);
    
79.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
    
80.         if(min < 10) min = '0' + min;
    
81.         if(sec < 10) sec = '0' + sec;
    
82.         return min + ':' + sec;
    
83. }
    
84. </script>

复制代码

模板使用说明：

一、改变播放器和lrc歌词位置：

分别修改 CSS 选择器 #mplayer 和 #lrc 的对应物理定位值即可

        #mplayer { position: absolute; right: 20px; bottom: 20px; }
        #lrc {position: absolute; left: 20px; top: 20px; }

二、改变lrc歌词文本颜色和播放时间信息文本颜色：

分别修改对应的 CSS 选择器 #lrctext 和 #tmsg 代码中的 stroke 颜色值即可

        #lrctext { font: bold 2em sans-serif; text-shadow: 4px 4px 0 #000; stroke-width: 0.5px; stroke: snow; fill: none; letter-spacing: 4px; }
        #tmsg { fill: transparent; stroke: gray; stroke-width: 1px; font: bold 1em sans-serif; }

三、lrc歌词显示不全：

可在 HTML 代码中修改歌词显示 svg 盒子的宽度：

        <svg id="lrc" width="600" height="50">
                <text id="lrctext" x="0" y="40">梦驼铃</text>
        </svg>

另外，字体设为更大时，同步更改 svg 的高度，且应将 text 标签的 y="40" 改为合适的值，一般为 svg 高度减去 10 即可。

加林森

我慢慢看清楚。谢谢老黑啦。

马黑黑

这里，通过对两个圆环的巧妙设置，可以绕开对环的鼠标经过检测，非常有意思。思路是这样：

圆环的 fill 属性值 为 none，环内的小圆就不会响应鼠标动作，环外四个角的区域也如此，故而根本不用去检测鼠标是否经过环。不过之前的检测圆与圆环的算法仍然是有意义的。

虽然不用检测圆与圆环，但反切函数还是必须使用，它是控制进度计算中必不可少的。

马黑黑

加林森 发表于 2022-9-7 12:24
我慢慢看清楚。谢谢老黑啦。

这个就不难了，因为两个 svg 都已经是可以随意设定物理位置的子元素

加林森

马黑黑 发表于 2022-9-7 12:28
这个就不难了，因为两个 svg 都已经是可以随意设定物理位置的子元素

好的好的。

加林森

我重新制作了一次“满园争春”，请你帮着看看。谢谢！

红影

还是比较习惯这个封装后的，都是相对定位，不像前面那个帖子，动辄好几百的x，y 比较头晕

红影

马黑黑 发表于 2022-9-7 12:27
这里，通过对两个圆环的巧妙设置，可以绕开对环的鼠标经过检测，非常有意思。思路是这样：

圆环的 fill  ...

也就是根本不用判断和扣除内圆了呗。这个倒是真的奇特，fill 属性值 为 none我以为只是没颜色，原来什么都没有。

不过前面那个判断内圆、圆环、环外的帖子也很好，通过那个帖子知道stroke-width=是平分在圆周两侧的，以前以为是套在圆外的呢。

梦缘

谢谢老师的精彩分享，学习代码，问好！

马黑黑

梦缘 发表于 2022-9-7 17:11
谢谢老师的精彩分享，学习代码，问好！

下午好

马黑黑

红影 发表于 2022-9-7 14:52
也就是根本不用判断和扣除内圆了呗。这个倒是真的奇特，fill 属性值 为 none我以为只是没颜色，原来什么 ...

所有的探究都是有价值的

小辣椒

这个套用更加快了，稍微动点脑子就可以自己修改一下

小辣椒

谢谢黑黑，万能的黑神

马黑黑

小辣椒 发表于 2022-9-7 18:10
谢谢黑黑，万能的黑神

没有谁万能的

红影

马黑黑 发表于 2022-9-7 17:34
所有的探究都是有价值的

黑黑也是无意中发现的吧，这代码倒是简单了

马黑黑

红影 发表于 2022-9-7 22:56
黑黑也是无意中发现的吧，这代码倒是简单了

是无意中搞懂的

红影

马黑黑 发表于 2022-9-7 23:19
是无意中搞懂的

而且可以用在其他的图形判断上了。

马黑黑

红影 发表于 2022-9-8 10:10
而且可以用在其他的图形判断上了。

大概如此吧

红影

马黑黑 发表于 2022-9-8 12:08
大概如此吧

通过黑黑的介绍，现在大家也知道这个功能了

马黑黑

红影 发表于 2022-9-8 21:18
通过黑黑的介绍，现在大家也知道这个功能了

挺好挺好