Multiple audio sources playing

[aweibell]

Describe the bug In short: multiple instances of return values from useAudioPlayer seems to be only partly in sync.

I have a component structure like this:

App.js
| PlayerPage
   | - List
   |    | - ListElement
   |
   | - PlayerControls

in App.js I wrap the PlayerPage inside an Then I call useAudioPlayer to set source and some other options in List. I also call useAudioPlayer with no arguments in PlayerControls, and it seems to pick up the playing state fine, but when I use play() or pause() from there it does not affect the playing track!

This behaviour seems very weird to me, but hopefully there is just something I haven't catched.

To Reproduce Steps to reproduce the behavior:

1. Go to the sandbox below
2. Click a green element in the playlist to select it
3. Click again, if required, to start playing, and again a couple times to pause/play
4. Observe the Play and Pause buttons states and console output
5. Let track keep playing
6. Pause track from Pause button
7. Observe that music still plays, and id is null in console
8. Click Play button
9. Observe that the sound is being played twice, simultaneously, and new id in console
10. Click Play/Pause multiple times, and hear that a new track starts playing for each Play click
11. Finally pause music by clicking on the green play list element.
12. Observe that all audio ids are paused and enjoy the silence

Codesandbox: https://codesandbox.io/s/useaudioplayer-multiplay-4uz28j?file=/src/List.js

Expected behavior The playing state should be the same for both instances of call to useAudioPlayer. Calling pause() in one instance should pause the sound playback initiated from the other and vice versa.

Environment (please complete the following information):

• Browser/ browser version: Brave v1.49.120 / Firefox 110
• Library version: 1.2.6
• React version: 18.2.0
• Node version:

[aweibell]

Is this project neglected, @E-Kuerschner ? Looks like Howler.js also is quite inactive? :-/

[E-Kuerschner]

hey @aweibell! Apologies, been really busy with my full time. Feel free to open any pull requests. I'll be able to review those much faster than I'll be able to contribute. However, I do plan to spend a weekend on this coming up so I'll make sure to look into this issue as well as a few other things.

[aweibell]

Thank you! I also only use this for a hobby project, so I fully understand your situation 😀

I am a bit concerned that howler.js seems to be neglected, though. Do you know the maintainer there? I found another react audio lib, hoover, which did move away from howler.js, but that does not support listening to current position, it seems.

[E-Kuerschner]

working on addressing this for v2

[E-Kuerschner]

closing since i am planning to merge v2 soon

[aweibell]

Sure, I have started implementing with 2.0.0-alpha, but did not quite get to a complete and working version of my app. Will let you know! Thanks for the great efforts with 2.0.0! :)