Vue自定义封装音频播放组件（带拖拽进度条）(改版)

参考别人写的组件进行的改版
原文组件链接:https://blog.youkuaiyun.com/weixin_48215380/article/details/138598853
改版之后的样式

<template>
  <div class="audioModule">
    <div class="left">
      <p class="audio_Name">{
   
   {
   
    audioName }}</p>
      <div class="audio_wrap_content">
        <audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc"
          @loadedmetadata="onLoadedmetadata" @ended="handleEnd">
          <source :src="audioSrc" />
        </audio>
        <div class="cudio_control_content">

          <!-- <img @click="startPlayOrPause" class="state_img" :src="audio.playing ? stopImg : playImg" alt="" /> -->
          <div class="state_time" style="marginRight:15px">{
   
   {
   
    audio.currentTime | formatSecond }}</div>
          <div class="slider">
            <el-slider v-model="sliderTime" :show-tooltip="false" @change="onChange"></el-slider>
          </div>
          <div class="state_time" style="marginLeft:10px">{
   
   {
   
    audio.maxTime | formatSecond }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="audio_btn active_audio_hover">
        <i class="iconfont" style="transform: rotate(180deg);"  @click="advance(2)">&#xe74e;</i>
      </div>
      <div class="audio_btn" @click="startPlayOrPause" :class="{active_audio_btn:audio.playing}">
        <i class="iconfont" v-if="!audio.playing">&#xe751;</i>
        <i class="iconfont" v-else>&#xe750;