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

<template>
  <el-row>
    <audio
      ref="audio"
      :src="audioSrc"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
    ></audio>
    <el-slider
      :max="duration"
      v-model="currentTime"
      @change="onSliderChange"
      @mousedown.native="onSliderMouseDown"
      @mouseup.native="onSliderMouseUp"
    ></el-slider>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      audioSrc: 'your-audio-url.mp3',
      duration: 0,
      currentTime: 0,
      isDragging: false
    };
  },
  methods: {
    onTimeUpdate(event) {
      this.currentTime = event.target.currentTime;
    },
    onLoadedMetadata(event) {
      this.duration = event.target.duration;
    },
    onSliderChange(value) {
      if (this.isDragging) {
        this.$refs.audio.currentTime = value;
      }
    },
    onSliderMouseDown() {
      this.isDragging = true;
    },
    onSliderMouseUp() {
      this.isDragging = false;
    }
  }
};
</script>

这段代码使用了Vue 2和Element UI来创建一个带有拖拽进度条的音频播放器。它包括一个<audio>标签和一个<el-slider>组件，用于控制音频的播放进度。代码中的onTimeUpdate方法会在音频播放时更新当前播放时间，onLoadedMetadata会在音频元数据加载完成时获取音频总时长，onSliderChange方法在滑块拖动时更新音频播放位置，并在拖动开始和结束时设置isDragging标志。