再整个audio控制按钮

马黑黑 · 发表于 2022-4-15 21:13

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

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

x

马黑黑 · 发表于 2022-4-15 21:14

代码：

<style type="text/css">
/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素按钮修饰 */
.btn::before {
content: ''; position: absolute; width: 100%; height: 100%;
background: #ffcc00 radial-gradient(circle at 35% 40%,rgba(255,255,255,.6), rgba(0,0,255,.15));
border-radius:50%; opacity: .25;
}
</style>
<div class="btn"></div>
<script language="javascript">
let flag = true;//true = 自动播放; false = 手动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/15/045fe77167d432057f862ef2a2b5b416.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
bgChange();
btn.onclick = function() {
flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
let c1 = `#${Math.random().toString(16).substr(-6)}`;
let c2 = `#${Math.random().toString(16).substr(-6)}`;
btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>

复制代码

马黑黑 · 发表于 2022-4-15 21:15

控制播放按钮的位置可以调整 .btn 选择器的 left 和 top 值：

/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}

马黑黑 · 发表于 2022-4-15 21:15

按钮大小可自定义：

/* 音乐控制按钮 */
.btn {
width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}