vue3 ant ts 集成wavesurfer

实现功能有：音词同步，倍速播放，拖拽播放，快进\退 ，重播，显示总 时长，关闭页面时关闭声音等功能

package.json 引入 "wavesurfer.js": "^7.7.14",

父页面引入自己封的 MyWaveSurfer.vue

 <!--    waveSrc 录音地址参数 -->
          <WaveSurfer :waveSrc="model['fsFilepath']">
          </WaveSurfer>

<script lang="ts" setup>

    import WaveSurfer from "@/views/recordCdr/MyWaveSurfer.vue";

MyWaveSurfer.vue

<template>
  <a-card>
    <Spin :tip="null" :spinning="loadLoading">
      <div :class="`wave-surfer`"  id="waveform" >
      </div>
      <!-- <div id="wave-timeline" ref="wave-timeline" style="height: 0px;"> -->
        <!--时间轴 -->
      </div>
    </Spin>
  </a-card>
  <a-card style="height: 62px">
    <div style="float: left;" v-if="playMs">
      <div style=";float: left">播放：&nbsp;&nbsp;</div>
      <Icon icon="ant-design:play-circle-outlined"  title="播放" class="playIcon" style="font-size: 32px;color: #2e9aff"   @click="playMusic()"> </Icon>
    </div>

    <div style="float: left;" v-if="!playMs">
      <div style="float: left">暂停：&nbsp;&nbsp;</div>
      <Icon icon="ant-design:pause-circle-outlined" title="暂停"    style="font-size: 30px;color: #2e9aff" @click="downMusic()"></Icon>
    </div>

    <div style="float: left;margin-left: 5%;"> 倍速：&nbsp;&nbsp;
      <a-select style="width: 90px;" :disabled="false" v-model:value="speedValue"  @change="speedClick">
        <a-select-option   value="1">
          1.0px
        </a-select-option>
        <a-select-option v-for="item in options" :key="item.value"  :value="item.value">
          {
  { item.text }}
        </a-select-option>
      </a-select>
    </div>
    <div style="float: left;margin-left: 5%;">
      <Icon icon="ant-design:notification-filled" title="声音"     style="float: left;font-size: 29px;;color: #2e9aff" @click="downMusic()"></Icon>
      <a-slider style="float: left;width: 200px"  v-model:value="voiceValue"   @afterChange="setVolume"  />

    </div>

    <div style="float: left;margin-left: 5%;">
      <div style="float: left;margin-top: 2px">快退/快进 ：&nbsp;&nbsp;</div>
      <Icon icon="ant-design:fast-backward-filled" title="快退"     style="float: left;font-size: 29px;;color: #2e9aff" @click="rew()"></Icon>

      <div style="float: left;margin-top: 2px"> &nbsp;&nbsp;--&nbsp;&nbsp;</div>
      <Icon icon="ant-design:fast-forward-filled" title="快进"     style="float: left;font-size: 29px;;color: #2e9aff" @click="speed()"></Icon>
    </div>
    <div style="float: left;margin-left: 5%;">
      <div style="float: left;margin-top: 2px">重播 ：&nbsp;&nbsp;</div>
      <Icon icon=&