React 中的 HowlerJS

Question

有人在 Ract 中使用过 Howler 吗？我有一个简单的函数 (handleRave)，它应该通过 useState 打开和关闭音乐。它有效，但是打开它后我无法停止“狂欢”。

我真的卡在这里了。

import Rave from "../assets/audio/Rave2.mp3"
import {Howl, Howler} from 'howler';

function Header() {

    const [musicOn, setMusicOn] = useState(false);

    const sound = new Howl({
        src: [Rave]
    });

    const handleRave = () => {
        Howler.volume(0.8);
        if(musicOn === false){
            setMusicOn(true);
            sound.play();
            console.log("start")
        }
        if(musicOn === true) {
            setMusicOn(false);
            sound.stop();
            console.log("stop")
        }
    }

    return (
        <section className="header">
            <nav className="header__nav wrapper">
                {
                 musicOn === false
                ? 
                 <button style={{padding: "10px"}} onClick={() => handleRave()}>Click to begin!</button>
                : 
                 <button style={{padding: "10px"}} onClick={() => handleRave()}>Stop raving</button>    
                }

Answer 1

仅在安装组件时创建 sound 一次，而不是在每次渲染时创建：

const sound = useRef(new Howl({
    src: [Rave]
}));

然后使用

sound.current.play();

和

sound.current.stop();

您当前的实现每次都创建并引用一个新的 sound，因此之前 .played 的与 .stopped 的不同。

另一种只调用 new Howl 一次的实现是使用状态：

const [sound, setSound] = useState();
useLayoutEffect(() => {
  setSound(new Howl({ src: [Rave] }));
}, []);

React 中的 HowlerJS

HowlerJS in React

reactjs

howler.js