Next中使用useSound实现mp3播放/暂停切换按钮无法暂停问题求助

问题原因 #

• 事件绑定逻辑错误：你在onClick属性中直接写了stopSong()/playSong()，加括号代表组件渲染时会立即执行对应函数，而非点击按钮时触发，导致逻辑完全不符合预期。
• 自定义函数逻辑无效：playSong和stopSong中写的isPlaying === true/isPlaying === false是相等判断语句，没有任何赋值或分支控制作用，属于冗余无效代码，既不会修改播放状态，也不会约束后续的播放/停止调用。

修正后代码 #

import useSound from 'use-sound';
import galaxySfx from '../../public/sounds/galaxy.mp3';
import styles from "./sound.module.scss";
import Aos from "aos";
import "aos/dist/aos.css";

const PlayButton = () => {
  const [play, { stop, isPlaying }] = useSound(galaxySfx);

  // 统一封装播放/暂停切换逻辑
  const togglePlay = () => {
    isPlaying ? stop() : play();
  };
  
  return (
    <div className={styles.playButton}>
       <button 
        data-aos="zoom-in"
        data-aos-offset="100"
        onClick={togglePlay}
        >
         🎺
      </button>
    </div>
  );
};

export default PlayButton;

补充说明 #

如果修改后仍有状态不同步的问题，可以检查useSound的版本，部分旧版本需要在初始化时添加interrupt: true配置保证状态更新正确：

const [play, { stop, isPlaying }] = useSound(galaxySfx, { interrupt: true });

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