极简圆环播放器插件应用示范
<style>#papa { margin: auto; width: 700px; height: 420px; background: gray; 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>
完整代码：
<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray; 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>
@千羽 @东篱闲人 @樵歌 @小九 插件说明：
https://www.huachaowang.com/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1791012&fromuid=7130 每日一课，这个老师天下难找{:4_190:} 马黑黑 发表于 2022-12-1 08:07
@千羽 @东篱闲人 @樵歌 @小九
我只能看看，看你教学一边吃西瓜{:4_173:} 樵歌 发表于 2022-12-1 08:44
每日一课，这个老师天下难找
{:4_191:} 樵歌 发表于 2022-12-1 08:44
我只能看看，看你教学一边吃西瓜
天冷了，吃凉的不好，西瓜拿去蒸以蒸{:4_170:} 这个还真是极简了，只要加个图片加首歌曲，其他的什么都不用动，太省力了{:4_187:} 樵歌 发表于 2022-12-1 08:44
每日一课，这个老师天下难找
师兄，这个是为你量身定做的，只要加图片和换歌曲，就可以有自己的作品了啊，赶快试试呗{:4_187:} 马黑黑 发表于 2022-12-1 08:54
天冷了，吃凉的不好，西瓜拿去蒸以蒸
不错的主意。{:4_189:} 樵歌 发表于 2022-12-1 20:42
不错的主意。
{:4_196:} 红影 发表于 2022-12-1 10:47
师兄，这个是为你量身定做的，只要加图片和换歌曲，就可以有自己的作品了啊，赶快试试呗
就是不知道图片和歌曲加在哪里呀{:4_203:} 马黑黑 发表于 2022-12-1 08:07
@千羽 @东篱闲人 @樵歌 @小九
来了……{:4_187:} 马黑黑 发表于 2022-12-1 08:05
完整代码：
复制代码了，明天看有时间就做哈{:4_173:} 千羽 发表于 2022-12-1 21:18
来了……
{:4_190:} 千羽 发表于 2022-12-1 21:21
复制代码了，明天看有时间就做哈
期待 马黑黑 发表于 2022-12-1 21:58
期待
俺忐忑呢{:4_173:} 樵歌 发表于 2022-12-1 20:46
就是不知道图片和歌曲加在哪里呀
有.MP3的就是歌曲，把歌曲地址整个复制了放在双引号里就行。图片通常看.JPG或类似格式的，替换成自己的就行。 千羽 发表于 2022-12-1 22:40
俺忐忑呢
不用慌啥，就在你帖子的基础上加一组JS代码
页:
[1]
2