Vue中实时同步音频currentTime至滑块的实现方案咨询

因为原生Audio的currentTime不属于Vue的响应式属性，无法通过watch直接监听，v-model.lazy也只会在输入框失去焦点时更新。要实现实时同步，核心是利用Audio原生的timeupdate事件，结合Vue的响应式变量处理：

具体实现步骤 #

1. 定义响应式变量
   在组件的data中声明绑定滑块的currentTime、歌曲总时长duration，以及标记用户操作的isUserChanging：

data() {
  return {
    player: new Audio(),
    currentTime: 0,
    duration: 0,
    isUserChanging: false
  }
}

2. 绑定Audio原生事件
   组件挂载时，给Audio实例绑定timeupdate（实时同步播放时间）和loadedmetadata（获取歌曲总时长）事件：

mounted() {
  this.player.src = this.songs[this.songIndex].src;
  
  // 实时同步播放时间到响应式变量
  this.player.addEventListener('timeupdate', () => {
    if (!this.isUserChanging) {
      this.currentTime = this.player.currentTime;
    }
  });
  
  // 获取歌曲总时长，设置滑块最大值
  this.player.addEventListener('loadedmetadata', () => {
    this.duration = this.player.duration;
  });
  
  this.player.play();
}

3. 处理滑块交互
   滑块绑定响应式变量currentTime，通过鼠标/触摸事件标记用户操作，避免自动更新与用户操作的循环冲突：

<input
  type="range"
  name="timeStamp"
  ref="time"
  v-model="currentTime"
  :max="duration"
  step="0.1"
  class="w-[100%] hover:cursor-pointer"
  @mousedown="isUserChanging = true"
  @touchstart="isUserChanging = true"
/>

4. 监听变量更新播放进度
   通过watch监听currentTime变化，用户拖动滑块时同步更新Audio的播放时间：

watch: {
  currentTime(newVal) {
    if (this.isUserChanging) {
      this.player.currentTime = newVal;
      this.isUserChanging = false;
    }
  }
}

5. 清理事件避免内存泄漏
   组件卸载前，移除Audio的事件监听并销毁实例：

beforeUnmount() {
  this.player.removeEventListener('timeupdate', () => {});
  this.player.removeEventListener('loadedmetadata', () => {});
  this.player.pause();
  this.player.src = '';
}

原理说明 #

• timeupdate是Audio原生事件，播放过程中会频繁触发，保证播放时间实时同步到响应式变量；
• isUserChanging标记区分用户主动拖动和自动更新，防止双向同步时出现循环触发；
• 滑块与Vue响应式变量绑定，既保证视图实时更新，也能反向控制Audio的播放进度。

内容的提问来源于stack exchange，提问作者Mat