手写一个简单的音频播放效果！

<template>
  <div id="Audio">
    <div class="audio-box">
      <div class="progress-box" ref="progressBox">
        <div class="progress" ref="progress">
          <span class="circle"></span>
        </div>
      </div>
      <div :class="{'play': isPlay, 'stop': !isPlay}" @click.stop="play"></div>
    </div>
    <audio src="../static/audio.mp3" ref="audio" preload></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 音频是否正在播放
      isPlay: false,
    }
  },
  mounted() {
    // 获取音频所在对象
    const audio = this.$refs.audio;
    // 获取颜色进度条所在对象
    const progress = this.$refs.progress;
    // 获得音频正在播放时的事件处理，当音频播放位置已经改变，显示音频当前播放位置
    audio.addEventListener('timeupdate', () => {
      // 获取音频总时长
      const duration = audio.duration;
      // 获取已播放的音频时长
      const stopTime = audio.currentTime;
      if(Number(duration) === Number(stopTime)) {
        this.isPlay = false;
      }
      // 计算颜色进度条的宽度
      progress.style.width = `${(stopTime / duration) * 100}%`
    })
  },
  methods: {
    play() {
      this.isPlay = !this.isPlay
      const audio = this.$refs.audio
      if (audio.paused) {
        audio.play()
      } else {
        audio.pause()
      }
    }
  }
}
</script>

<style lang="scss">
#Audio {
  .audio-box {
    width: 5.49rem;
    height: .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.24rem 0 .35rem;
    box-sizing: border-box;
    margin: 0 .43rem;
    background: url('../img/audio_bg.png') 0/100% 100% no-repeat;

    .progress-box {
      width: 4.18rem;
      height: .07rem;
      background: #780000;
      border-radius: .2rem;
      position: relative;

      .progress {
        width: 0%;
        height: .07rem;
        border-radius: .2rem;
        position: absolute;
        left: 0;
        top: 0;
        background: #ff4f43;

        .circle {
          width: .16rem;
          height: .16rem;
          display: inline-block;
          background: #ff4f43;
          border-radius: 50%;
          position: absolute;
          top: -.4rem;
          right: -.1rem;
        }
      }

    }

    .play {
      width: .49rem;
      height: .53rem;
      background: url('../img/play.png') 0/100% 100% no-repeat;
    }
    .stop {
      width: .49rem;
      height: .53rem;
      background: url('../img/stop.png') 0/100% 100% no-repeat;
    }
  }
}
</style>

效果图如下：