Skip to content

no sound when src changes before howlerjs loads asynchronously #85

@dan-2019

Description

@dan-2019

My setup:

const [sound, setSound] = useState(null)
const [play] = useSound(sound, ... )

in the useEffect hook I then fetch the sound-url and once fetched set it with setSound(soundSrc)
In my case if the fetch happens "too soon", no sound is played.

The culprit is the lazy loading of howler. As it loads the useEffect hook that is triggered on sound source change runs. The test that ensures the howler component is initialized fails and no further action is taken. Sound source remains unchanged, in my case, as it was null no sound is played.

The solution is trivial, add the howler loading state into the dependency array of the useEffect hook:

React__default.useEffect(function () {
...
}, [JSON.stringify(src), isMounted.current]);

This ensures the hook re-runs once howler is loaded. Now, of course, the hook will also be called every time howler finishes loading, maybe a test should be added to avoid the extra needless initialization of howler inside the hook? Regardless, for me this change alone solved the issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions