在Howler和反应中暂停音频的问题

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;

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

Answer 1

你在 const PlayPause 中声明了 'sound'。为了让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。使用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;