|
|
楼主 |
发表于 2022-12-2 12:55
|
显示全部楼层
本帖最后由 马黑黑 于 2022-12-2 22:57 编辑
二十九、只一个光盘按钮的播放器（无歌词同步）
插件代码：
(function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#btnplay {--ww: 35px;--state: paused;position: absolute;background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}@keyframes rot { to { transform: rotate(1turn); } }</style><span id="btnplay"></span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;btnplay.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');};mkPlayer.HCPlayer = playCode;})(this);
应用说明：
<scrtipt>HCPlayer({});</script>
光盘可以定义尺寸、位置：
<scrtipt>
HCPlayer({
player_css: '--ww: 40px; top: 20px; left: 20px;',
});
</script>
其中，--ww 设定光盘尺寸；top 和 left 设置光盘位置。上面的代码也可以写在一行：
<scrtipt>HCPlayer({player_css: '--ww: 40px; top: 20px; left: 20px;',});</script>
或写成下面分行的样子更易于修改（注意分行使用的反引号` ... `）：
<scrtipt>
HCPlayer({
player_css: `
--ww: 40px;
top: 20px;
left: 20px;
',
});
</script>
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
楼主: 马黑黑
发表于 2022-12-1 22:45
显身卡
