js+css如何制作（音频）图标【切换播放动画】效果？

 步骤如下：

1、准备播放前的图标和播放时的图标，播放时的有4种不同状态，将4种图标设置成一张图片

   

    

2、布局html+css

<div class="word_total">
  <span>美 /mpren/</span>
  <!-- 播放时的动画 -->
  <div class="voice voicePlay"></div>
  <!-- 播放前的图标 -->
  <img class="audioPlayId" @click="audioPlay()" src="@/assets/home/bugles_icon.png" alt="">
  <!-- 音频 -->
  <audio class="audioId" controls>
    <source src="@/assets/home/music.mp3" type="audio/mpeg">
  </audio>
</div>

<style lang="scss" scoped>
// 动画
.voice {
  background: url('../../assets/home/horns.png') right 0 no-repeat;
  background-size: 400%;
  width: 80px;
  height: 71px;
  margin-right: -24px;
  display: none;
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
</style>

 此处需将audio本身的音频文件隐藏

// 也可用display:none 隐藏，页面展示需要，此处用以下方式，按需即可

.audioId{
  opacity: 0;
  width: 0;
}

3、js控制audio播放前后的图标状态

methods: {
    // 播放音频
    audioPlay () {
      let audios = document.getElementsByClassName('audioId')[0]
      let audioPlayId = document.getElementsByClassName('audioPlayId')[0]
      let voices = document.getElementsByClassName('voice')[0]
      if (audios !== null) {
        // 播放
        if (audios.paused) { // 检测播放是否已暂停.audio.paused 在播放器播放时返回false.
          audios.play()
          voices.style.display = 'block'
          audioPlayId.style.display = 'none'
        }
        // 播放结束
        audios.addEventListener('ended', function () {
          voices.style.display = 'none'
          audioPlayId.style.display = 'block'
        }, false)
      }
    }
}

        希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~