变换色彩的audio控制按钮

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>

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