<style type="text/css">
   #circleDiv { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0px 0px 2px #000; cursor: pointer; }
</style>



<div id="circleDiv"></div>
<script language="javascript">
let tt;
let cc = document.getElementById('circleDiv');
let aud = document.createElement('audio');
aud.loop = true;
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/21/a70a72c70cef164b3d75bbbabc6f48f3.mp3';
cc.appendChild(aud);
merge();
autoPlay();
cc.onclick = function() { autoPlay(); }
function merge(){
   let num = 45;
   let bgStr = 'conic-gradient(';
   for(j=0; j<360/num; j++) {
  bgStr += `#${Math.random().toString(16).substr(-6)} ${j*num}deg,`;
}
   bgStr = bgStr.slice(0, bgStr.length-1) + ")";
   cc.style.background = #${Math.random().toString(16).substr(-6)} ${bgStr};
}
function autoPlay() { aud.paused == true ? (tt = setInterval(merge, 100), aud.play()) : (clearInterval(tt), aud.pause()); }
</script>




说明：
 

无需写HTML的audio标签，将音乐地址写入js代码里相应的位置即可，就是 aud.src = '。。。' 那句。

按钮是个光盘形状，不转动，以变色方式展示音乐播放还是暂停。按钮光盘可大可小，只需改变 CSS 的 width 和 height 两个值便可。

重要：HTML的语句，下面这句，不能缺失，它既是光盘的载体，又是 JS 控制的对象，同时还是 audio 的宿主。

<div id="circleDiv"></div>



来源 花潮论坛

标签: none

添加新评论