天策·枪魂
<style>#papa { left: -214px; width: 1024px; height: 640px; background: darkred url('https://638183.freep.cn/638183/t22/webp/qianghun.webp') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; top: 80px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; top: 30px; display: block; }
#lrctxt { text-anchor: middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 1px 1px 2px hsla(0,0%,90%,.72); letter-spacing: 3px; }
#tmsg { fill: hsla(0,100%,95%,.7); font: bold 1em sans-serif; }
#btnwrap { display: block; fill: hsla(0,100%,95%,.7); cursor: pointer; }
#btnwrap:hover { fill: hsla(0,100%,100%,.8); }
</style>
<div id="papa">
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<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(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="2" stroke="hsla(0,100%,0%,0.25)" />
</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>
<g id="btnwrap">
<path id="btnplay" d="M 50 50,50 70,70 60 z"></path>
<path id="btnmid" d="M 55 50, 55 70, 60 70, 60 50, 55 50 z" fill="transparent"></path>
<path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
</g>
</svg>
<svg id="lrc" width="600" height="150">
<path id="lrcPath" fill="none" stroke="none" d="M 0 150 A 460 460, 10, 0, 1, 600 150" />
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="orange" stop-opacity="0.8" />
<stop offset="35%" stop-color="red" stop-opacity="0.8" />
<stop offset="65%" stop-color="tan" stop-opacity="0.8" />
<stop offset="100%" stop-color="green" stop-opacity="0.8" />
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath">花潮论坛lrc在线</textPath></text>
</svg>
</div>
<script>
let aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
let lrcAr = [,,,,,,,,,,,,戈飲血狂 斷魂刺無人可擋",6.6],,,,,,,,,,,,,戈飲血狂 斷魂刺無人可擋",5.8],,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=34179655.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.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;};
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;}});
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;}
btnstate();
</script>
歌词虽然使用花潮LRC在线增强版做，也做了微调，但在做帖子时，突然想起再试一下之前用svg做的一个播放器+弧形歌词模板——它很别致——，就牺牲掉逐字同步模拟功能，也是第一次测试增强版歌词数组对以往帖子模板的兼容性。
本帖，歌词与播放器圆环，共享一个svg线性渐变。至于歌词的弧形布局，通过svg路径实现。因歌词原因需要修改尺寸时，除歌词所使用的svg尺寸要变化外，路径也要改动少量数值，使之配套。
帖子简简单单，仅svg可能比较抽象。代码在楼下。 完整代码
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: darkred url('https://638183.freep.cn/638183/t22/webp/qianghun.webp') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute; top: 80px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; top: 30px; display: block; }
#lrctxt { text-anchor: middle; dominant-baseline: text-after-edge; fill: url(#gradient); font: bold 2em sans-serif; text-shadow: 1px 1px 2px hsla(0,0%,90%,.72); letter-spacing: 3px; }
#tmsg { fill: hsla(0,100%,95%,.7); font: bold 1em sans-serif; }
#btnwrap { display: block; fill: hsla(0,100%,95%,.7); cursor: pointer; }
#btnwrap:hover { fill: hsla(0,100%,100%,.8); }
</style>
<div id="papa">
<svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
<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(0,0,0,0.35)" />
<circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="2" stroke="hsla(0,100%,0%,0.25)" />
</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>
<g id="btnwrap">
<path id="btnplay" d="M 50 50,50 70,70 60 z"></path>
<path id="btnmid" d="M 55 50, 55 70, 60 70, 60 50, 55 50 z" fill="transparent"></path>
<path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
</g>
</svg>
<svg id="lrc" width="600" height="150">
<path id="lrcPath" fill="none" stroke="none" d="M 0 150 A 460 460, 10, 0, 1, 600 150" />
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="orange" stop-opacity="0.8" />
<stop offset="35%" stop-color="red" stop-opacity="0.8" />
<stop offset="65%" stop-color="tan" stop-opacity="0.8" />
<stop offset="100%" stop-color="green" stop-opacity="0.8" />
</linearGradient>
</defs>
<textx="54%" y="0"><textPath id="lrctxt" xlink:href="#lrcPath">花潮论坛lrc在线</textPath></text>
</svg>
</div>
<script>
let aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
let lrcAr = [,,,,,,,,,,,,戈飲血狂 斷魂刺無人可擋",6.6],,,,,,,,,,,,,戈飲血狂 斷魂刺無人可擋",5.8],,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=34179655.mp3';
aud.autoplay = true;
aud.loop = true;
prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
btnwrap.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;};
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;}});
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;}
btnstate();
</script>
马黑黑 发表于 2022-10-5 08:20
歌词虽然使用花潮LRC在线增强版做，也做了微调，但在做帖子时，突然想起再试一下之前用svg做的一个播放器+ ...
对SVG当时貌似还有点感觉，过去几天又忘得差不多了。这个很漂亮，而且可顺势再感受一下路径，真好{:4_187:} fill: url(#gradient)这句迷糊半天，嗯，是渐变{:4_204:} 红影 发表于 2022-10-5 09:35
fill: url(#gradient)这句迷糊半天，嗯，是渐变
在CSS中调用渐变（通过svg渐变设定的id） 这个圆环播放器记得黑黑还弄过小短线的散热片方式的呢{:4_204:} 红影 发表于 2022-10-5 09:34
对SVG当时貌似还有点感觉，过去几天又忘得差不多了。这个很漂亮，而且可顺势再感受一下路径，真好{:4_187 ...
svg的确有些难度 红影 发表于 2022-10-5 09:37
这个圆环播放器记得黑黑还弄过小短线的散热片方式的呢
有这个吗？没啥印象。 小鱼儿 发表于 2022-10-5 09:40
右边有些没显示出来
不会吧？是手机浏览？ 黑黑朋友重阳节快乐！ 梦油 发表于 2022-10-5 09:42
黑黑朋友重阳节快乐！
这个画面能看全吗？ 小鱼儿 发表于 2022-10-5 09:40
右边有些没显示出来
手机浏览的话，浏览模式很重要 小鱼儿 发表于 2022-10-5 09:40
右边有些没显示出来
你的浏览器有问题，对svg的支持度不够，落伍了。你试下Chrome或夸克。 马黑黑 发表于 2022-10-5 09:43
这个画面能看全吗？
这不是完整的画面吗？完整的画面是啥样啊？ 梦油 发表于 2022-10-5 10:20
这不是完整的画面吗？完整的画面是啥样啊？
完整就好。那个谁，小鱼儿，说看不全 马黑黑 发表于 2022-10-5 10:20
完整就好。那个谁，小鱼儿，说看不全
我看挺好的。 梦油 发表于 2022-10-5 10:21
我看挺好的。
{:5_108:} 小鱼儿 发表于 2022-10-5 11:05
黑黑老师，电脑上看全了
你手机的浏览器也要换了，跟不上新标准 马黑黑 发表于 2022-10-5 09:41
不会吧？是手机浏览？
黑黑手机欣赏完美{:4_178:}