vue中进度条控制audio

可以通过以下步骤在Vue中控制音频的进度条：

1. 在Vue组件中引入音频文件和进度条组件。

<template>
  <div>
    <audio ref="audio" :src="audioSrc"></audio>
    <progress ref="progress" max="100" value="0"></progress>
  </div>
</template>

2. 在Vue组件中添加数据和方法。

<script>
export default {
  data() {
    return {
      audioSrc: 'audio.mp3', // 音频文件路径
      audio: null, // 音频对象
      progress: null, // 进度条对象
    }
  },
  mounted() {
    this.audio = this.$refs.audio
    this.progress = this.$refs.progress
    this.audio.addEventListener('timeupdate', this.updateProgress) // 监听音频时间更新事件
  },
  methods: {
    play() {
      this.audio.play() // 播放音频
    },
    pause() {
      this.audio.pause() // 暂停音频
    },
    updateProgress() {
      const currentTime = this.audio.currentTime
      const duration = this.audio.duration
      const progressPercentage = (currentTime / duration) * 100
      this.progress.value = progressPercentage // 更新进度条的值
    },
    seek(event) {
      const seekPercentage = event.offsetX / this.progress.offsetWidth
      this.audio.currentTime = this.audio.duration * seekPercentage // 改变音频的当前时间
      this.progress.value = seekPercentage // 更新进度条的值
    }
  }
}
</script>

3. 在Vue组件中使用进度条和控制按钮。

<template>
  <div>
    <audio ref="audio" :src="audioSrc"></audio>
    <progress ref="progress" max="100" value="0" @click="seek"></progress>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

这样，在Vue组件中就可以通过进度条控制音频的播放进度了。