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;

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

Answer 1

您已在const PlayPause内部声明了“声音”。为了使sound.pause（）起作用，对“ sound”的访问应该是全局的。这样做：

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。使用反应咆哮，您可以这样做：

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;

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

1 个答案: