ReactJS音频播放时修改currentTime的问题及代码调整咨询

你遇到的核心问题是当前代码仅在音频初始化加载元数据时设置了一次currentTime，没有提供播放过程中动态修改进度的入口，而且每次调用playAudio都可能创建新的Audio实例，导致播放中的音频实例和你想修改的可能不是同一个。

先拆解原代码的几个关键问题：

• 仅在loadedmetadata事件中初始化currentTime，没有后续修改的逻辑
• 直接操作this.state.audio虽然能暂停，但缺乏统一的进度控制方法
• 切换音频时的实例管理可以更严谨

下面是调整后的完整代码和说明：

步骤1：添加独立的进度调整方法 #

新增一个专门用于修改currentTime的方法，不管音频处于播放还是暂停状态都能调用：

seekAudio(progress) {
  // 确保当前有活跃的音频实例
  if (this.state.audio) {
    const targetTime = this.state.audio.duration * progress;
    // 直接修改当前音频实例的currentTime，播放状态下也生效
    this.state.audio.currentTime = targetTime;
    // 同步更新state里的进度值，保持UI和音频进度一致
    this.setState({ progress });
  }
}

步骤2：优化playAudio方法的实例管理 #

原代码每次调用都会创建新的Audio实例，我们可以调整为：只有当切换到新音频时才创建实例，否则复用现有实例，同时确保loadedmetadata的逻辑只在实例初始化时执行：

playAudio(playing_url) {
  // 如果当前播放的就是目标音频，直接切换播放/暂停状态
  if (this.state.playing_story === playing_url) {
    if (this.state.playing) {
      this.state.audio.pause();
      this.setState({ playing: false });
    } else {
      this.state.audio.play();
      this.setState({ playing: true });
    }
    return;
  }

  // 切换到新音频，先暂停之前的音频（如果存在）
  if (this.state.audio) {
    this.state.audio.pause();
  }

  // 创建新的音频实例
  const audio = new Audio(playing_url);
  audio.addEventListener('loadedmetadata', () => {
    // 初始化时设置进度
    audio.currentTime = audio.duration * this.state.progress;
    console.log('audio duration loaded:', audio.duration);
    // 初始化完成后自动播放
    audio.play();
  });

  // 添加实时进度同步监听，让UI进度条和播放进度保持一致
  audio.addEventListener('timeupdate', () => {
    if (audio.duration) {
      const currentProgress = audio.currentTime / audio.duration;
      this.setState({ progress: currentProgress });
    }
  });

  // 更新state
  this.setState({
    playing: true,
    playing_story: playing_url,
    audio
  });
}

关键调整点说明 #

• 独立的seekAudio方法：这是解决播放中修改进度的核心——浏览器允许在音频播放状态下直接修改currentTime属性，不需要先暂停，只要拿到当前活跃的Audio实例即可操作。
• 复用音频实例：避免重复创建实例导致的状态混乱，只有切换新音频时才创建新实例。
• 简化播放/暂停逻辑：先判断是否是同一音频，再处理状态切换，逻辑更清晰，减少冗余代码。

额外使用提示 #

如果你有进度条组件，只需要在进度条的拖动/点击事件中调用this.seekAudio(新的进度值)（进度值是0到1之间的小数），就能实现播放过程中实时调整进度的功能。

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