reactjs - 如何在 React 中卸载现有的嚎叫？

Question

我有一个用例，每当用户转到我的应用程序的播放器页面并单击播放按钮时，就会创建一个嚎叫对象并播放声音，但是当用户离开该页面并单击播放按钮播放其他音频时，之前的声音会保留播放并且当前声音的顶部也开始播放。

这是实现：

const CustomPlayer = withCustomAudio(props => {
  let { currentTime, duration } = props;
  const [playing, setPlaying] = useState(false);
  const sound = new Howl({ src: [props.streamUrl] });
  // localStorage.setItem("playing", JSON.stringify(sound));
  return (
    <>
      <div className="audioplayer">
        <div className="audioplayer-info">
          <button
            onClick={() => {
              props.onTogglePlay(sound);
            }}
          >
            Play
          </button>
        </div>
      </div>
    </>
  );
});

现在在 App js 中

const togglePlay = sound => {
    return sound.playing() ? sound.pause() : sound.play();
  };

我想在App.js文件中有控件，因为即使用户转到我的应用程序的其他页面，我也希望播放音频。

有什么建议么？

标签： reactjshtml5-audiohowler.js