<style>
.mBox {
        --w: 50px; /* 尺寸 */
        margin: auto;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;
        animation: rot 2s linear infinite;
}
.mBox span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
        border: 3px solid deeppink;
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="mBox"><span></span><span></span><span></span><span></span></div>

<script>
let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "https://3a./d/189Cloud/music/Billy%20-%20%E6%B8%A1%E6%83%85%20(%E7%BA%AF%E9%9F%B3%E4%B9%90).mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
mBox.appendChild(au);
if(!flag) mBox.style.animationPlayState = "paused";
mBox.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>

---------------------------------------------------------------------------------------