vue 音频播放控件封装

<template>

  <div>

    <audio

      @timeupdate="updateProgress"

      controls

      ref="audioRef"

      style="display: none"

    >

      <source :src="audioUrl" type="audio/mpeg" />

      您的浏览器不支持音频播放

    </audio>

    <div class="audio_right" v-if="audioUrl">

      <img

        v-if="audioIsPlay"

        @click="playAudio"

        class="audio_icon"

        src="@/assets/images/pause.png"

        alt="播放"

      />

      <img

        v-else

        @click="playAudio"

        class="audio_icon"

        src="@/assets/images/play.png"

        alt="暂停"

      />

      <el-slider

        class="slider_box"

        v-model="currentProgress"

        :show-tooltip="false"

        @input="handleProgressChange"

      />

      <div class="audio_time">

        <span class="audio_current">{ { audioStart }}</span>

        &nbsp;/&nbsp;

        <span class="audio_total">{ { durationTime }}</span>

      </div>

      <div class="volume">

        <div class="volume_progress" v-show="audioHuds"  @click.stop="stopEvent">

          <el-slider

            vertical

            height="100px"

            class="volume_bar"

            v-model="audioVolume"