在 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 音频文件创建一个简单的 play/pause 开关。我所有的反应功能都运行良好。当我点击 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;

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

Issue with pausing audio in Howler and react

reactjs

html5-audio

web-audio-api

howler.js