|
|

楼主 |
发表于 2022-12-4 10:21
|
显示全部楼层
<style>
#papa { margin: auto; width: 700px; height:420px; background: gray url('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2251926242,2519140039&fm=173&app=49&f=JPEG?w=640&h=444&s=C210CC2057F27B841E9055C40100C0B3')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?id=118075&userid=1375167424.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><svgid="mplayer" width="100" height="100"><gid="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><gid="btnwrap"><path id="btnplay" d="M 40 40,4060,60, 50 z"></path><path id="btnpause" d="M 4240,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>
|
|