马黑黑 发表于 2022-3-31 19:46

变换色彩的audio控制按钮

<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>

马黑黑 发表于 2022-3-31 19:46

<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>

马黑黑 发表于 2022-3-31 19:52

本帖最后由 马黑黑 于 2022-3-31 19:55 编辑

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

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

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

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

友情提示：请不要在本页测试效果，建议另开帖测试。

红影 发表于 2022-3-31 20:51

马黑黑 发表于 2022-3-31 19:52
这个，无需写HTML的audio标签，将音乐地址写入js代码里相应的位置即可，就是 aud.src = '。。。' 那句。

...

黑黑真棒，这个又可以做到帖子里玩了呢{:4_187:}

马黑黑 发表于 2022-3-31 20:52

红影 发表于 2022-3-31 20:51
黑黑真棒，这个又可以做到帖子里玩了呢

小辣椒呢，还不能动脖子吗

来看你 发表于 2022-4-1 14:40

奇怪啊我移到帖子里图标不见了

来看你 发表于 2022-4-1 14:43

我再试试

加林森 发表于 2022-4-1 17:02

挺好用的。谢谢老黑。{:4_190:}

马黑黑 发表于 2022-4-1 18:30

加林森 发表于 2022-4-1 17:02
挺好用的。谢谢老黑。

感谢支持

加林森 发表于 2022-4-1 18:57

马黑黑 发表于 2022-4-1 18:30
感谢支持

应该的应该的。我已经小做了一个出来，发在水区了。

马黑黑 发表于 2022-4-1 22:41

加林森 发表于 2022-4-1 18:57
应该的应该的。我已经小做了一个出来，发在水区了。

{:4_190:}

加林森 发表于 2022-4-1 22:43

马黑黑 发表于 2022-4-1 22:41


谢谢老黑教我们。{:4_191:}

红影 发表于 2022-4-1 22:56

马黑黑 发表于 2022-3-31 20:52
小辣椒呢，还不能动脖子吗

不知道她现在情况如何，也没敢去打扰她。

马黑黑 发表于 2022-4-2 08:15

红影 发表于 2022-4-1 22:56
不知道她现在情况如何，也没敢去打扰她。

可能是进入手术康复阶段，要求严格的

红影 发表于 2022-4-2 12:41

马黑黑 发表于 2022-4-2 08:15
可能是进入手术康复阶段，要求严格的

是啊，最好让她安心静养。

马黑黑 发表于 2022-4-2 12:47

红影 发表于 2022-4-2 12:41
是啊，最好让她安心静养。

需要点时间。脊椎，颈椎的手术，恢复期很长，静躺一两个月甚至更长的时间都有可能

红影 发表于 2022-4-2 13:38

马黑黑 发表于 2022-4-2 12:47
需要点时间。脊椎，颈椎的手术，恢复期很长，静躺一两个月甚至更长的时间都有可能

能治好就是好事，时间长短倒是无妨。

马黑黑 发表于 2022-4-2 16:07

红影 发表于 2022-4-2 13:38
能治好就是好事，时间长短倒是无妨。

我估计是手术治疗了

红影 发表于 2022-4-2 19:41

马黑黑 发表于 2022-4-2 16:07
我估计是手术治疗了

嗯，黑黑聪明，的确是。

马黑黑 发表于 2022-4-2 19:58

红影 发表于 2022-4-2 19:41
嗯，黑黑聪明，的确是。

我是搞侦探的
页: [1] 2
查看完整版本: 变换色彩的audio控制按钮