简单使用vue2和elementUI自定义audio支持拖拽进度

<template>
  <div class="music-player">
    <audio ref="audio" :src="src" @timeupdate="updateTime" @loadedmetadata="loadedmetadata" @ended="onAudioEnded"></audio>
    <!-- 播放暂停按钮 -->
    <div class="cm-btn-left" @click="togglePlay">
      <img src="../../../../public/img/icon/play.png" v-show="!isPlaying">
      <img src="../../../../public/img/icon/pause.png" v-show="isPlaying">
    </div>
    <!-- 时间 -->
    <div class="cm-time">
      <span>{{ currentTimeShow }}</span> / <span>{{ durationShow }}</span>
    </div>
    <!-- 播放进度条 -->
    <div class="cm-progress" @mousedown="handleMouseDown">
      <el-slider v-model="progress" :max="duration" :format-tooltip="formatTime" @change="progressChange"></el-slider>
    </div>
    <!-- 倍速控制 -->
    <div class="playback-rate-wrapper">
      <el-select v-model="playbackRate" @change="changePlaybackRate">
        <el-option
          v-for="item in speed"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <!-- 音量控制 -->
    <div class="volumn-wrapper">
     <el-popover
        popper-class="volumn-popover"
        placement="right"
        width="30px"
        trigger="click">
        <el-slider
          v-model="volumnValue"
          vertical
          tooltip-class="volumn-tooltip"
          height="80px"
          @change="volumnChange">
        </el-slider>
        <el-button slot="reference" type="text"><img src="../../../../public/img/icon/volumn.png"></el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    src: String,
  },
  data() {
    return {
      isPlaying: false,
      currentTime: 0,
      progress: 0,
      duration: 0,
      playbackRate: 1,
      speed: [
        {
          label: '0.5x',
          value: 0.5
        },
        {
          label: '0.75x',
          value: 0.75
        },
        {
          label: '1x',
          value: 1
        },
        {
          label: '1.5x',
          value: 1.5
        },
        {
          label: '2x',
          value: 2
        }
      ],
      volumnValue: 50,
      lastTimeUpdate: null
    };
  },
  computed: {
    currentTimeShow: function () {
      return this.formatTime(this.currentTime);
    },
    durationShow: function () {
      return this.formatTime(this.duration);
    }
  },
  mounted() {

  },
  beforeDestroy() {
   
  },
  methods: {
    // 外部点击暂停播放
    resetAudio() {
      this.$refs.audio.pause();
      this.isPlaying = false;
      this.playbackRate = 1;
      this.volumnValue = 50;
      this.duration = 0;
      setTimeout(() => {
        this.currentTime = 0;
      }, 50);
    },
    // 播放暂停按钮点击事件
    togglePlay() {
      if (!this.src || this.src.length === 0) {
        return
      }
      if (this.isPlaying) {
        this.$refs.audio.pause();
        this.isPlaying = false;
      } else {
        this.$refs.audio.play();
        this.$refs.audio.volume = this.volumnValue / 100;
        this.isPlaying = true;
      }
    },
    // 格式化播放时间
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const secondsRemainder = Math.round(seconds % 60);
      return `${minutes}:${secondsRemainder < 10 ? '0' : ''}${secondsRemainder}`;
    },
    // 倍速控制
    changePlaybackRate() {
      this.$refs.audio.playbackRate = this.playbackRate;
    },
    // 更新播放时间
    updateTime() {
      this.currentTime = this.$refs.audio.currentTime;
      this.progress = this.currentTime;
    },
    // 获取播放总时长
    loadedmetadata() {
      this.duration = this.$refs.audio.duration;
    },
    // 播放结束
    onAudioEnded() {
      this.isPlaying = false;
    },
    // 进度条鼠标按下事件
    handleMouseDown() {
      this.$refs.audio.pause();
    },
    // 设置进度
    progressChange(e) {
      this.$refs.audio.currentTime = e;
      this.progress = e;
      this.$refs.audio.play();
      this.isPlaying = true;
    },
    // 设置音量
    volumnChange(e) {
      this.$refs.audio.volume = e / 100;
    },
  },
};
</script>

<style lang="scss" scoped>
  .music-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    background-color: #f5f5f5;
    border-radius: 27px;
    height: 54px;
    width: 100%;

    .cm-btn-left {
      cursor: pointer;
      width: 22px;
      height: 22px;
      img {
        width: 22px;
        height: 22px;
      }
    }

    .volumn-wrapper {
      img {
        width: 20px;
        height: 18px;
      }
    }

    .cm-time {
      font-size: 14px;
      color: #404040;
      margin: 0 10px;
    }

    .cm-progress {
      flex: 1;
      margin: 0 15px 0 10px;

      ::v-deep .el-slider__button {
        border-color: #404040 !important;
      }

      ::v-deep .el-slider__bar {
        background-color: #404040 !important;
      }
    }

    .playback-rate-wrapper {
      margin-right: 10px;
      ::v-deep .el-input__suffix {
        display: none;
      }

      ::v-deep .el-input__inner {
        height: 28px;
        width: 45px;
        text-align: center;
        padding: 0px !important;
        font-size: 12px;
      }
    }
  }

  ::v-deep .el-slider__button {
    width: 12px;
    height: 12px;
  }

  ::v-deep .el-popover {
    min-width: auto !important;
  }
</style>

app.vue中或者其他全局变量中修改下样式

.volumn-popover {

  min-width: auto !important;

}

.volumn-tooltip {

  z-index: 99999 !important;

}