我的月亮
<style>
#papa { left: -20px; width: 660px; height: 421px; background: #666 url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.xspic.com%2Fimg10%2F138%2F97%2F2908554_1.jpg&refer=http%3A%2F%2Fimg.xspic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665322633&t=45e2173d8393d5998349631a1670bfa8') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute;left: 66px; top: -25px; padding: 0; margin: 20px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; }
#prog, #track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; left: 20px; bottom: 0; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 0 4px 0 #000; letter-spacing: 2px; }
</style>
<div id="papa">
<div id="mplayer">
<svg width="100%" height="100%" shape-rendering="geometricPrecision">
<g transform="rotate(-90, 80, 80)">
<circle id="track" cx="80" cy="80" r="65" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.45" />
<circle id="prog" cx="80" cy="80" r="65" fill="none" stroke="red" stroke-width="10" />
</g>
<text fill="orange">
</text>
</svg>
</div>
<svg id="lrc" width="400" height="50">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00ffff"/>
<stop offset="50%" stop-color="#ccffff"/>
<stop offset="100%" stop-color="#3300ff"/>
</linearGradient>
</defs>
<text id="lrctxt" x="0" y="25">我的月亮</text>
</svg>
</div>
<script>
let aud = new Audio();
aud.src = 'http://music.163.com/song/media/outer/url?id=1923395630.mp3';
aud.autoplay = true;
aud.loop = true;
//设置圆环进度偏移
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
//圆环鼠标经过
mplayer.onmousemove = (e) => {
if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
//圆环点击
mplayer.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) { //轨道
let deg = Math.atan2(e.offsetY - 80, e.offsetX - 80) * 180 / Math.PI;
deg += (e.offsetX < 80 && e.offsetY < 80) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
} else { //内区域
aud.paused ? aud.play() : aud.pause();
}
}
//监听播放进度
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
cur.textContent = toMin(aud.currentTime);
dur.textContent = toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
}
});
//圆检测鼠标经过
let isHover = (x,y) => Math.pow(x - 80, 2) + Math.pow(y - 80, 2) >= Math.pow(45, 2);
//时间信息格式化
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 80), sec = parseFloat(val % 80);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script> 感谢老师的精彩分享，好听！{:4_187:} 清舟的月亮可以用绳子牵住啊，真棒，图图色调漂亮{:4_173:} 千羽 发表于 2022-9-14 20:54
清舟的月亮可以用绳子牵住啊，真棒，图图色调漂亮
这个图百度直接拿的了{:4_189:} 梦缘 发表于 2022-9-14 20:41
感谢老师的精彩分享，好听！
谢谢梦缘，发现你好快啊 这个构思巧妙，清舟的帖子灵活运用播放器效果，太赞了{:4_199:} 效果和颜色都调得极好，清舟太赞了{:4_187:} 月亮风筝{:4_173:} 这月亮是跑不掉了{:4_189:}清舟好创意， 图美歌靓，真棒！
{:4_187:}{:4_190:}{:4_204:} 大猫咪 发表于 2022-9-14 21:55
这月亮是跑不掉了清舟好创意， 图美歌靓，真棒！
猫来了啊，都送走了吗 好开心 发表于 2022-9-14 21:32
月亮风筝
我的月亮就得绑住了{:4_189:} 红影 发表于 2022-9-14 21:23
效果和颜色都调得极好，清舟太赞了
想试改变大小的，就没现成拿的图了 绿叶清舟 发表于 2022-9-14 22:00
猫来了啊，都送走了吗
没有的清舟 还有一个在， 差不多都在办公室，{:4_173:} 绿叶清舟 发表于 2022-9-14 21:12
这个图百度直接拿的了
清舟好会取材，省力又唯美{:4_187:} 大猫咪 发表于 2022-9-14 22:02
没有的清舟 还有一个在， 差不多都在办公室，
这么久还没走啊，想过国庆了{:4_189:} 绿叶清舟 发表于 2022-9-14 22:04
这么久还没走啊，想过国庆了
估计是{:4_189:}反正他要回去开会了，表现一下 {:4_189:} 大猫咪 发表于 2022-9-14 22:07
估计是反正他要回去开会了，表现一下
开完会还要再过来啊 千羽 发表于 2022-9-14 22:03
清舟好会取材，省力又唯美
偷懒的了{:4_173:} 绿叶清舟 发表于 2022-9-14 22:12
开完会还要再过来啊
要看有没有耗子冒头了 {:4_173:} 大猫咪 发表于 2022-9-14 22:14
要看有没有耗子冒头了
敢S 队的啊，这时候还冒头{:4_189:}