在咆哮中暂停音频并做出反应的问题

Question

请看一下这个简单的代码 -

  const PlayPause = () => {
    let sound = new Howl({
      src: [
        "https://..." // I have a link of an mp3 file stored in an S3 bucket
      ],
      loop: true,
      volume: 0.5
    });

    const [isPlaying, setIsPlaying] = useState(false);

    return (
      <div
        className="volume main-box dummy-abs"
        onClick={() => {
          // Toggles play / pause

          if (isPlaying) {
            sound.pause();
            setIsPlaying(false);
          } else {
            sound.play();
            setIsPlaying(true);
          }
        }}
      ></div>
    );
  };

  export default PlayPause;

我正在尝试为来自网络的咆哮音频文件流创建一个简单的播放/暂停切换。我所有的反应功能都工作正常。当我点击 div 时，播放正常，但暂停不正常。事实上，每当我点击播放时，它实际上会播放音频文件的多个实例。我在这里做错了什么吗？

Answer 1

您已经在 const PlayPause 中声明了“声音”。为了让 sound.pause() 工作，“声音”的访问应该是全局的。 这样做：

let sound = new Howl({
  src: [
    "https://...", // I have a link of an mp3 file stored in an S3 bucket
  ],
  loop: false,
  volume: 0.5,
});

const PlayPause = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <button
      className="volume main-box dummy-abs"
      onClick={() => {
        // Toggles play / pause

        if (isPlaying) {
          sound.pause();
          setIsPlaying(false);
        } else {
          sound.play();
          setIsPlaying(true);
        }
        console.log("isPlaying", isPlaying);
      }}
    >
      Press Me
    </button>
  );
};

export default PlayPause;

希望它会起作用。

如果您对全局访问不满意，可以使用 react-howler。使用 react-howler 你可以这样做：

import ReactHowler from "react-howler";

const PlayPause = () => {
  const [playpause, setPlaypause] = useState(false);
  return (
    <div>
      <ReactHowler
        src="https://..."
        playing={playpause}
        //ref={(ref) => (this.player = ref)}
      />
      <button onClick={() => setPlaypause(!playpause)}> Press Me</button>
    </div>
  );
};

export default PlayPause;