vue中自定义audio组件，支持渲染多个audio

const albumItemList = [
  {
    voice_url: '',
    duration: "00:59",
    start_duration: "00:00",
    progress: 0,
    stop_s: 0,
  },
  {
    voice_url: '',
    duration: "01:59",
    start_duration: "00:00",
    progress: 0,
    stop_s: 0,
  }
]

html

  <div class="directory-list">
        <div
            class="directory-list-item"
            v-for="(item, index) in albumItemList"
            :key="index"
          >
            <div class="progress">
              <div class="start-time">{{ item.start_duration }}</div>
              <el-slider
                v-model="item.progress"
                :show-tooltip="false"
                @change="handleChangeSlider($event, item)"
              ></el-slider>
              <div class="end-time">{{ item.duration }}</div>
            </div>
            <img
              v-show="item.item_id !== albumItem.item_id"
              src="@/assets/images/bofang.png" //播放的图片
              alt=""
              @click="handlePlay(item)"
            />
            <img
              v-show="item.item_id === albumItem.item_id"
              src="@/assets/images/bofang-2.png" //暂停的图片
              alt=""
              @click="handleStop"
            />
          </div>
        </div>
        
    <audio
      v-show="false"
      ref="audioPlayer"
      :src="albumItem.voice_url"
      controls
      @timeupdate="onTimeUpdate"
    ></audio>

js

export default {
  data() {
    return {
      isStop: false,
      albumItem: {},
      albumItemList: [],
    };
  },
  methods: {
      toTime(sec) {
      let s = sec % 60 < 10 ? "0" + (sec % 60) : sec % 60;
      let min =
        Math.floor(sec / 60) < 10
          ? "0" + Math.floor(sec / 60)
          : Math.floor(sec / 60);
      return min + ":" + s;
    },
    timeToSeconds(timeString) {
      const [minutes, seconds] = timeString.split(":").map(Number);
      return minutes * 60 + seconds;
    },
      handlePlay(item) {
      this.albumItem = item;
      const e = item.stop_s;
      const duration = parseInt(this.timeToSeconds(item.duration));
      const progress = (e / duration) * 100;
      this.albumItemList.forEach((item) => {
        if (item.item_id === this.albumItem.item_id) {
          item.progress = progress;
        }
      });
      this.$nextTick(() => {
        if (item.stop_s !== 0) this.$refs.audioPlayer.currentTime = e;
        this.$refs.audioPlayer.play();
      });
    },
        handleStop() {
      this.albumItem = {};
      this.$nextTick(() => {
        this.$refs.audioPlayer.pause();
      });
    },
     handleReset() {
      this.albumItemList.forEach((item) => {
        if (item.item_id === this.albumItem.item_id) {
          item.start_duration = "00:00";
          item.progress = 0;
          item.stop_s = 0;
          this.albumItem = {};
        }
      });
    },
        handleChangeSlider(e, item) {
      this.albumItem = item;
      this.$nextTick(() => {
        this.$refs.audioPlayer.pause();
      });
      this.isStop = true;
      const ct = (e * this.timeToSeconds(item.duration)) / 100;
      this.$nextTick(() => {
        this.$refs.audioPlayer.currentTime = ct;
        this.$refs.audioPlayer.play();
      });
      this.isStop = false;
    },
      onTimeUpdate() {
      if (this.isStop) return;
      const duration = parseInt(this.$refs.audioPlayer.duration);
      const curr = parseInt(this.$refs.audioPlayer.currentTime);
      const progress = (curr / duration) * 100;
      this.albumItemList.forEach((item) => {
        if (item.item_id === this.albumItem.item_id) {
          item.progress = progress;
          item.stop_s = curr;
          item.start_duration = this.toTime(curr);
        }
      });
      if (progress === 100) this.handleReset();
    },
  }
}

时间紧，有些逻辑可以拆出来写一个公共函数，大佬们可以自行优化一下