如何在React/TypeScript中设置音频组件的播放时长？

场景说明 #

我用 React 和 TypeScript 开发 Web 应用，现有一个 SoundEffect 组件，通过接收 soundType props，调用 soundSelector() 返回对应 MP3 文件并自动播放。现有代码如下：

interface ISoundEffectProps {
    soundType: string,
    // duration?: number, <- 想要添加这个属性
}

const SoundEffect: React.FunctionComponent<ISoundEffectProps> = (props) => {
  const sound = soundSelector(props.soundType)
  return (
    <div>
        <audio src={sound} autoPlay></audio>
    </div>
  );
};

export default SoundEffect;

目前需要为不同时长准备单独的 MP3 文件，过于冗余。希望添加 duration 属性，通过 <SoundEffect soundType="count-down" duration={3}/> 这样的方式让音频仅播放指定时长后停止，且组件不能添加控制按钮。

修改方案 #

调整后的组件代码如下：

interface ISoundEffectProps {
  id: string,
  soundType: string,
  duration?: number,
}

const SoundEffect: React.FunctionComponent<ISoundEffectProps> = (props) => {
  const sound = soundSelector(props.soundType); // 返回类似 "../assets/sounds/example.mp3" 的路径
  // 类型断言为 HTMLAudioElement，否则 audio 会被识别为 HTMLElement，无法调用 pause() 方法
  const audio = document.getElementById(props.id) as HTMLAudioElement; 

  function startTimer(duration: number) {
    if (audio != null) { // 避免 audio 为 null 时调用 pause() 抛出未捕获类型错误
      // 使用 setTimeout 而非 setInterval，仅需执行一次暂停操作
      setTimeout(() => {
        audio.pause();
      }, duration * 1000);
    }
  }

  return (
    <div>
        <audio 
          autoPlay 
          id={props.id} 
          onPlay={() => startTimer(props.duration || 10)}
        >
          <source src={sound} type="audio/mp3"/>
        </audio>
    </div>
  );
};

export default SoundEffect;

使用示例 #

• 播放5秒后停止：<SoundEffect id="beep_id" soundType="beep" duration={5}/>
• 播放3秒后停止：<SoundEffect id="countdown_id" soundType="count-down" duration={3}/>
• 未指定时长时，默认播放10秒后停止：<SoundEffect id="default_id" soundType="alert"/>

关键细节说明 #

1. 添加 id props：用于精准定位 audio DOM 元素，确保控制目标唯一
2. 类型断言：将获取到的 DOM 元素转为 HTMLAudioElement，才能调用音频专属的 pause() 方法
3. 定时器选择：用 setTimeout 替代 setInterval，避免不必要的重复触发
4. 空值校验：调用 pause() 前检查 audio 实例，防止空指针错误
5. 默认值处理：未传入 duration 时，自动使用10秒作为播放时长

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