js 自定义转圈的音频控件

    <audio src="./assets/***.mp3" id="audioElement"></audio>
    <img id="music-contrl" class="music-contrl music-move" src="./assets/***.png">

/* 音频控制 */
.music-contrl {
  position: fixed;
  top: 1.8rem;
  right: 1.8rem;
  width: 3rem;
  height: 3rem;
}
@keyframes changeright {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.music-move {
  animation: changeright 6s linear infinite;
}

var audio = document.getElementById('audioElement')
// 自动播放
audio.play();
// 无限循环
audio.loop = true;
// 播放状态
var isAudioShow = true;
// 监听控件点击
var controlEle = document.getElementById('music-contrl')
controlEle.addEventListener('click', function () {
  if (isAudioShow) {
    audio.pause()
    controlEle.classList.remove('music-move')
  } else {
    audio.play();
    controlEle.classList.add('music-move')
  }
  isAudioShow = !isAudioShow
})