Hot-reloading crashes when using sprites

[martinjuhasz]

When using sprites, hot reloading does not work anymore.
When react calls commitHookEffectListMount after hot reloading, this gets called in use-sound

React__default.useEffect(function () {
    if (sound) {
      sound.volume(volume);
      sound.rate(playbackRate);
    } // A weird bug means that including the `sound` here can trigger an
    // error on unmount, where the state loses track of the sprites??
    // No idea, but anyway I don't need to re-run this if only the `sound`
    // changes.
    // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [volume, playbackRate]);

where sound.rate(playbackRate); fails in howler because self._sprite is undefined TypeError: self._sprite[sound._sprite] is undefined.

Your comment suggest you're already aware of this issue. This is more a inconvinience than anything serious, so i created this issue just to keep track of this bug.

[drscottlobo]

I think I am getting an error from the same underlying issue. When I hot reload using my next.js app, I get that error. But I also get a very similar error when doing something as simple as adjusting the volume:

 const [volume, setVolume] = useState(0.75);
    const [play, soundingNote] = useSound([pianoSoundsOgg, pianoSoundsMp3, pianoSoundsM4a], {
        sprite: pianoSoundData.sprite,
        volume: volume,
    });

    function handleChangeVolumeOnClick() {
       if (volume === .75) {
          setVolume(.25)
       }
    }
}

I get the following error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading '0')

Call Stack
Howl.rate
node_modules/howler/dist/howler.js (1564:0)
eval
node_modules/use-sound/dist/use-sound.esm.js (129:0)
invokePassiveEffectCreate
node_modules/react-dom/cjs/react-dom.development.js (23487:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (23574:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (468:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11276:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (23447:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (23324:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (417:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (390:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (157:0)

[drscottlobo]

UPDATE:

I found a work around using the exposedData Howl object:

`
const [volume, setVolume] = useState(0.75);
const [play, exposedData] = useSound([pianoSoundsOgg, pianoSoundsMp3, pianoSoundsM4a], {
sprite: pianoSoundData.sprite,
volume: volume,
});

function handleChangeVolumeOnClick() {
   if (volume === .75) {
      setVolume(.25)
      exposedData.sound.volume(.25)  // update howl object volume at the same time as state.
   }
}

}
`

[drscottlobo]

Ps. Love this Hook by the way, thanks for all your work on it!

[drscottlobo]

Still hoping this bug might get a fix? It's a bummer to keep having to reload the page with every change since this bug prevents hot reloading.

[rymdmetafor]

UPDATE:

I found a work around using the exposedData Howl object:

` const [volume, setVolume] = useState(0.75); const [play, exposedData] = useSound([pianoSoundsOgg, pianoSoundsMp3, pianoSoundsM4a], { sprite: pianoSoundData.sprite, volume: volume, });

function handleChangeVolumeOnClick() {
   if (volume === .75) {
      setVolume(.25)
      exposedData.sound.volume(.25)  // update howl object volume at the same time as state.
   }
}

} `

what is "pianoSoundData.sprite" in your solution?

[drscottlobo]

That's the list of sprites in the JSON object for the audio data. You can use https://github.com/tonistiigi/audiosprite to generate the JSON file and the audio file for whatever audio you are using. Here's an example: { "src": ["/audio/sounds.ogg", "/audio/sounds.m4a", "/audio/sounds.mp3", "/audio/sounds.ac3"], "sprite": { "guitar-A2#": [0, 2142.4036281179137], "guitar-A2": [3000, 2137.5963718820863], "guitar-A3#": [6000, 2143.8548752834467], "guitar-A3": [9000, 2140.5895691609976] } }

…

On Sun, Dec 18, 2022 at 10:58 PM rymdmetafor ***@***.***> wrote: UPDATE: I found a work around using the exposedData Howl object: ` const [volume, setVolume] = useState(0.75); const [play, exposedData] = useSound([pianoSoundsOgg, pianoSoundsMp3, pianoSoundsM4a], { sprite: pianoSoundData.sprite, volume: volume, }); function handleChangeVolumeOnClick() { if (volume === .75) { setVolume(.25) exposedData.sound.volume(.25) // update howl object volume at the same time as state. } } } ` what is "pianoSoundData.sprite" in your solution? — Reply to this email directly, view it on GitHub <#43 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJVT3RBOC3FV3EPQDEZEDLTWOABRLANCNFSM4SEZAVAA> . You are receiving this because you commented.Message ID: ***@***.***>

-- *Scott Wolf, DMA* Oxnard College - Professor of Music www.scottwolfguitar.com All Strings Considered <http://www.scottwolfguitar.com/podcast.html> Follow on Twitter - @allstrings <https://twitter.com/allstrings> Subscribe free on iTunes <https://itunes.apple.com/us/podcast/all-strings-considered/id562425515> - Subscribe - Please Rate!

[Clueed]

Update for 2024:

const [volume, setVolume] = useState(1)

const [play, exposedData] = useSound(...)

useEffect(() => {
    if (exposedData.sound) exposedData.sound._volume = volume
}, [volume])

exposedData.sound._volume = newVolume

How come there are no well-maintained sound libraries?

[cjinghong]

When using sprites, hot reloading does not work anymore. When react calls commitHookEffectListMount after hot reloading, this gets called in use-sound

React__default.useEffect(function () {
    if (sound) {
      sound.volume(volume);
      sound.rate(playbackRate);
    } // A weird bug means that including the `sound` here can trigger an
    // error on unmount, where the state loses track of the sprites??
    // No idea, but anyway I don't need to re-run this if only the `sound`
    // changes.
    // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [volume, playbackRate]);

where sound.rate(playbackRate); fails in howler because self._sprite is undefined TypeError: self._sprite[sound._sprite] is undefined.

Your comment suggest you're already aware of this issue. This is more a inconvinience than anything serious, so i created this issue just to keep track of this bug.

Whats wrong with including sound in the useEffect dependency?