React中如何实现点击按钮时停止播放音频并从头重新播放

问题原因 #

你的原有代码存在两个核心问题导致无法实现重复点击重新播放的效果：

• Audio实例声明在组件函数体内部，组件每次重渲染都会创建新的Audio实例，无法复用同一个实例控制播放状态
• 没有处理播放进度重置逻辑，处于播放中的音频再次调用play()方法不会生效，所以不会重新播放

修复后代码 #

import React, { useRef, useEffect } from "react";
import "./button.css";

export default function Button() {
  // 用useRef存储Audio实例，保证组件重渲染时始终操作同一个音频对象
  const audioRef = useRef(new Audio("/vibrate.mp3"));

  const handleClick = () => {
    // 直接重置播放进度到起始位置，不管当前是否正在播放都生效
    audioRef.current.currentTime = 0;
    audioRef.current.play();
  };

  // 组件卸载时清理音频资源，避免内存泄漏
  useEffect(() => {
    return () => {
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, []);

  return (
    <button className="btn" onClick={handleClick}>
      Click Me
    </button>
  );
}

修改说明 #

• 用useRef存储Audio实例：保证组件无论怎么重渲染，始终操作同一个音频对象，不会丢失之前的播放状态
• 播放前重置currentTime为0：无需额外判断音频是否正在播放，直接把进度拉到最开始，再调用play()就会从头播放，完全符合需求
• 新增卸载清理逻辑：组件销毁时主动暂停音频并清空实例，避免出现后台继续播放、内存泄漏等异常问题

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