js 自定义转圈的音频控件

自己找一个图标

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

/* 音频控制 */

#audioElement {

  position: absolute;

  left: -9999px;

}

.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
})