《梦驼铃》常规模式封装及模板说明
《梦驼铃》常规模式封装及模板说明 | 马黑黑所谓常规封装，指“div+svg”的封装模式，将svg重组、固化，使用者无需对svg做过多的设计，把svg元素当成普通的HTML元素操作即可。下面是代码，随后是一些必要说明。
<style>
#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; }
#mplayer { position: absolute; right: 20px; bottom: 20px; }
#lrc {position: absolute; left: 20px; top: 10px; }
#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; }
#btnplay, #btnpause { fill: #ccc; cursor: pointer; display: block; }
#btnpause { display: none; }
#btnplay:hover, #btnpause:hover { fill: orange; }
</style>
<div id="papa">
<svg id="mplayer" width="120" height="120">
<g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
<circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="rgba(255,255,255,0.65)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="6" stroke="rgba(57,54,81,0.85)" />
</g>
<polygon id="btnplay" points="50 50, 50 70, 70 60" />
<g id="btnpause" fill="tranparent">
<rect x="52" y="50" width="5" height="20" />
<rect x="62" y="50" width="5" height="20" />
</g>
<path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
<path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
<g id="tmsg">
<text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
</svg>
<svg id="lrc" width="600" height="50">
<text id="lrctext" x="0" y="40">梦驼铃</text>
</svg>
</div>
<script>
let aud = new Audio();
let lrcAr = [
['0.00', '纯音乐 - 梦驼铃'],
['300.00', '感谢支持']
];
let cc = {
x: 1*track.getAttribute('cx'),
y: 1*track.getAttribute('cy'),
r: 1*track.getAttribute('r'),
sw: 1*track.getAttribute('stroke-width'),
len: track.getTotalLength(),
};
aud.src = 'https://music.163.com/song/media/outer/url?id=1911002130.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.textContent = lrcAr;
}
});
btnplay.onclick = btnpause.onclick = () => aud.paused ? aud.play() : aud.pause();
mama.onclick = (e) => {
let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
aud.currentTime = aud.duration * deg / 360;
};
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</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 比较头晕{:4_173:} 马黑黑 发表于 2022-9-7 12:27
这里，通过对两个圆环的巧妙设置，可以绕开对环的鼠标经过检测，非常有意思。思路是这样：
圆环的 fill...
也就是根本不用判断和扣除内圆了呗。这个倒是真的奇特，fill 属性值 为 none我以为只是没颜色，原来什么都没有。
不过前面那个判断内圆、圆环、环外的帖子也很好，通过那个帖子知道stroke-width=是平分在圆周两侧的，以前以为是套在圆外的呢。 谢谢老师的精彩分享，学习代码，问好！{:4_187:} 梦缘 发表于 2022-9-7 17:11
谢谢老师的精彩分享，学习代码，问好！
下午好 红影 发表于 2022-9-7 14:52
也就是根本不用判断和扣除内圆了呗。这个倒是真的奇特，fill 属性值 为 none我以为只是没颜色，原来什么 ...
所有的探究都是有价值的 这个套用更加快了，稍微动点脑子就可以自己修改一下{:4_173:} 谢谢黑黑，万能的黑神{:4_187:} 小辣椒 发表于 2022-9-7 18:10
谢谢黑黑，万能的黑神
没有谁万能的 马黑黑 发表于 2022-9-7 17:34
所有的探究都是有价值的
黑黑也是无意中发现的吧，这代码倒是简单了{:4_173:} 红影 发表于 2022-9-7 22:56
黑黑也是无意中发现的吧，这代码倒是简单了
是无意中搞懂的{:4_170:} 马黑黑 发表于 2022-9-7 23:19
是无意中搞懂的
而且可以用在其他的图形判断上了。 红影 发表于 2022-9-8 10:10
而且可以用在其他的图形判断上了。
大概如此吧 马黑黑 发表于 2022-9-8 12:08
大概如此吧
通过黑黑的介绍，现在大家也知道这个功能了{:4_187:} 红影 发表于 2022-9-8 21:18
通过黑黑的介绍，现在大家也知道这个功能了
挺好挺好
页:
[1]