useGlobalAudioPlayer and useAudioPlayer seems to mix up their states

[aweibell]

Describe the bug When loading audio src/file with the same name in both useGlobalAudioPlayer and useAudioPlayer, the response seems to be mixed up. useAudioPlayer calls the onLoad callback, but isReady is false, isLoading is false and duration is 0.

To Reproduce Steps to reproduce the behavior:

1. load the same audio src with useGlobalAudioPlayer() in one component and useAudioPlayer in another component
2. get duration from useAudioPlayer

Expected behavior Expected duration to show length of audio track, but it shows 0, even if onload callback is called, which should indicate that it is loaded.

Environment (please complete the following information):

• Browser/ browser version: Chrome 118.0.5993.70
• Library version: 2.1.1
• React version: 17.0.2
• Node version: 16.20.2

[aweibell]

I created a sandbox, but am not able to reproduce the exact same behaviour. However, the global loading fails initially, then returns the correct data, so it seems like the state is mixed up here as well, as long as I did not retry load after the error occurred?

https://codesandbox.io/s/inspiring-cray-4zg5r6?file=/src/Components.js

[aweibell]

Looking at the code, it seems like they share the same Howl instance in the end, since they use the same src string?

[E-Kuerschner]

interesting find @aweibell! perhaps like you suspect this comes down to an implementation detail within Howler. The lib does cache Howl instances (which this package also takes advantage of) so maybe it returns the same instance. If you find a solution ill be happy to look at the PR!

[E-Kuerschner]

Closing since we could not reproduce reliably