汉宫秋月 to樵歌（套用极简圆环）

红影

红影

图图没出来，今天的图床好像都有问题。反正图片很小，这里传一下：

刚才去看看图床已经好了，把这里的删了，节省点坛子空间：）

红影

<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray url('https://pic.imgdb.cn/item/63896bda16f2c2beb16b5cd9.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
</style>
<div id="papa">
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1325131432.mp3" autoplay loop></audio>
<script>
(function() {
        (function(mkPlayer) {let defaults = {player_css: 'bottom: 10px; left: calc(50% - 50px);',playerCode: `<style>#mplayer { position: absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55); }#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }</style><svg id="mplayer" width="100" height="100"><g id="circle_wrap" transform="rotate(-90, 50, 50)" style="cursor: pointer;"><circle id="track" cx="50" cy="50" r="40" stroke-width="10" /><circle id="prog" cx="50" cy="50" r="40" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 40 40,40 60,60, 50 z"></path><path id="btnpause" d="M 42 40,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display: none;"></path><path d="M 47 50,50 40,50 60,47 60 z" fill="transparent" /></g></svg>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.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('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');};mkPlayer.HCPlayer = playCode;})(this);
        HCPlayer({});
})();
</script>

风中飞尘

是不是我手机坏掉了  点不了播放器按钮

梦油

古香古色的余音缭绕、美妙动听。

红影

@樵歌  看过来，只要换红色的图片地址和蓝色的音画地址，别的什么都不用动，就能发帖了。

如果用网易云的音乐，甚至蓝色的也不用动，只把蓝色那行里面绿色的数字换掉就行了，是不是特别简单

红影

风中飞尘 发表于 2022-12-2 11:22
是不是我手机坏掉了  点不了播放器按钮

我这里能够点呢，我现在是电脑。

红影

呀，到吃饭时间了，等回来再说。这个帖子只是试验，跟樵歌说一下到底怎么做这个极简代码。等吃再说

小辣椒

风中飞尘 发表于 2022-12-2 11:22
是不是我手机坏掉了  点不了播放器按钮

可以点击的，你手机可以放大播放器界面，估计你手指太粗

小辣椒

亲爱的，给樵哥哥的套用吧

马黑黑

小辣椒 发表于 2022-12-2 11:30
可以点击的，你手机可以放大播放器界面，估计你手指太粗

所言极是

马黑黑

小巧精致，配色得分。赞。

红影

小辣椒 发表于 2022-12-2 11:31
亲爱的，给樵哥哥的套用吧

是的，樵歌说没找到要替换的地方，弄个给他看的

红影

马黑黑 发表于 2022-12-2 12:44
小巧精致，配色得分。赞。

直接放了图片换个音乐，这个代码实在是太方便了

红影

@樵歌  具体步骤如下：
1、先找个图片，得到地址，如红色部分。然后找个音乐，或者直接到网易云里复制个ID数字。
2、复制上述全部代码，开个新帖，勾选右上角纯文本和左下角HTML后，把代码黏贴上去。
3、用准备好的图片和音乐，替换上面红色和蓝色部分。点发帖，就看到新的帖子了。
4、注意：替换时候千万别把单引号和双引号弄掉了，把地址准确地黏贴到引号里就行。

就这么简单，师兄可以试试了。

马黑黑

红影 发表于 2022-12-2 13:51
直接放了图片换个音乐，这个代码实在是太方便了

不错的

红影

醉美水芙蓉 发表于 2022-12-2 17:39
红影美女教程做得不错！

呵呵，樵歌不太做这个，跟他要说得细点

红影

梦油 发表于 2022-12-2 11:27
古香古色的余音缭绕、美妙动听。

谢谢梦油，做这种代码帖子特别方便，梦油也可以试试的呢

红影

马黑黑 发表于 2022-12-2 18:18
不错的

最方便的音画帖做法，黑黑带来普惠代码