H5 Audio 音频播放

好像现在很少有用 Audio ，因为现在好多都是小程序播放 ，所依我想用这个组件来写一个

这个就是我要做的功能，点击标题的时候，弹框展开 不播放，点击播放的时候，图片转动 这样的一个效果 然后那个播放的按钮会切换 

<template>
<div class="Title_box" v-if="FirstLagShow">
        <div class="Titleplayback_box_main">
          <div class="Titleplayback">
            <div class="Titleplayback_left" @click="FirstLagPlay">
              <img
                :src="coverImg"
                alt=""
                class="Titleplayback_icon spin"
                :class="{ 'spin-active': isSpinning }"
              />
              <div class="map_start_play">
                <img
                  src="../assets/map/play.png"
                  alt=""
                  class="start-icon"
                  v-if="PlaybackFlag"
                />
                <img
                  src="../assets/map/start.png"
                  alt=""
                  class="start-icon"
                  v-else
                />
              </div>
            </div>
            <div class="Titleplayback_right">
              <div style="display: flex; align-items: center">
                <span class="right-name">{{ name }}</span>
                <span class="right-leve" v-if="level">{{ level }}A</span>
              </div>
              <div class="Titleplayback_name">
                {{ description }}
              </div>
            </div>
          </div>
          <div class="Titleplayback-area">
            <div class="area_title">
              景区地址 :
              <span v-if="cityName == provinceName">{{ provinceName }}</span
              ><span v-else>{{ provinceName }}-{{ cityName }}</span>
            </div>
          </div>
        </div>
        <audio
          ref="audioDescript"
          :src="descriptionAudio"
          @play="onPlay"
          @pause="onPause"
        ></audio>
      </div>
</template>

<style>
.Title_box {
  position: absolute;
  display: flex;
  top: 170px;
  z-index: 9;
  width: 100%;
  width: 690px;
  background: #fff;
  margin-left: 30px;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
}

.Titleplayback_box_main {
  padding: 37px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Titleplayback {
  display: flex;
  align-items: center;
}

.Titleplayback_icon {
  width: 136px;
  height: 136px;
  border-radius: 100px;
  background-color: #f8f8f8;
}

.title-name {
  font-size: 34px;
  color: #000;
  font-weight: 700;
}

.right-name {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 34px;
  color: #000000;
  font-weight: 700;
}

.right-leve {
  background: #fe7058;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  padding: 5px 8px;
  margin-left: 18px;
}

.Titleplayback_right {
  margin-left: 41px;
}

.Titleplayback_name {
  font-size: 24px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 17px;
}

.Titleplayback-area {
  width: 600px;
  background: #f0f0f0;
  border-radius: 10px;
  margin-top: 18px;
}

.area_title {
  font-size: 24px;
  color: #666;
  padding: 28px;
}
.Titleplayback_left {
  position: relative;
}

.start-icon {
  width: 52px;
  height: 52px;
}

.map_start_play {
  position: absolute;
  font-size: 0;
  top: 42px;
  left: 42px;
}

.isVisitm_icon {
  width: 87px;
  height: 32px;
  margin-left: 10px;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 初始状态不旋转 */
.spin {
  animation: none;
}

/* 旋转状态 */
.spin-active {
  animation: spin 2s linear infinite;
}
<style>

<script>
export default{
  data(){
  return{
   PlaybackFlag: false, //控制景区那个播放动画
   isSpinning: false, // 控制旋转的标志

 }
   
  },
 methods:{
   //标题转动, 带动画
    FirstLagPlay() {
      this.PlaybackFlag = !this.PlaybackFlag; // 切换播放/暂停状态
      if (this.PlaybackFlag) {
        this.$refs.audioDescript.play(); // 播放音频
      } else {
        this.$refs.audioDescript.pause(); // 暂停音频
      }
    },
    onPlay() {
      this.isSpinning = true; // 音频开始播放时，图片开始旋转
    },
    onPause() {
      this.isSpinning = false; // 音频暂停时，图片停止旋转
    },
    TitleplaybackPlay() {
      this.MarkPointShow = false;
      this.PresentationShow = false;
      // 切换弹窗的显示状态
      this.FirstLagShow = !this.FirstLagShow;
      // 切换箭头的方向
      this.SwitchFlag = this.FirstLagShow;
      if (!this.FirstLagShow) {
        this.PlaybackFlag = false;
        this.isSpinning = false;
      }
    },
}


}
</script>