How to automatically play when switching audio

[Vang-z]

How to automatically play when switching audio

[Vang-z]

Okay, thx a lot!

[Vang-z]

I'm sorry for not replying to you in time, because I was ill during this period. I will test these methods as soon as possible and hope they work as scheduled. Thank you!

[E-Kuerschner]

hi @Vang-z thank you for opening this. Can you please provide the following?

• library version
• browser/platform
• a snippet of the code you are trying

I will need to reliably reproduce your issue before I can start debugging this. Hopefully I will be able to address over the weekend.

[Vang-z]

library version: 1.2.4
browser/platform: chrome 96.0.4664.110
a snippet of the code:

// Initial Code
const PlayerCore: React.FC<{ song: any }> = ({song}) => {
  const classes = playerCoreStyles();

  const dispatch = useDispatch();
  const player = useSelector(state => state.musicPlayer);

  const {togglePlayPause, play, pause, volume, playing} = useAudioPlayer({
    src: song.src,
    autoplay: player.autoplay,
    volume: player.volume / 100,
    html5: true,
    "onend": () => {
      dispatch(musicPlayerSlice.actions.dispatchAutoplay(true));
      dispatch(musicPlayerSlice.actions.dispatchEnd(true));
    }
  });
  // render code
}

// because of the useAudioPlayer function don't accept the audio scr array
// I have a bad solution, It will to change the src of the useAudioPlayer, when the player was ending.
  useEffect(() => {
    if (player.autoplay && player.end) {
      dispatch(musicPlayerSlice.actions.dispatchSrc(newSrc);
      dispatch(musicPlayerSlice.actions.dispatchEnd(false));
    }
  }, [dispatch, togglePlayPause, player, playing])

But there are still problems with this, if the newSrc equal to the old src, we must use play() function to play the audio. By the way useAudioPlayer is a excellent lib for react :)

[E-Kuerschner]

@Vang-z i can see one issue with your useEffect. If I'm understanding what you want to do correctly, you want to begin the necxt sound when the previous one ends. However, based on your second code snippet I don't think that is what is happening. If you want to trigger some behavior at the end of a sound you can use the onend callback in the options you pass to the main hook.

Please try putting your "play next track" logic in there and not in this effect first. Please let me know if I misunderstood your issue.

[Vang-z]

I'm sorry that my description is not very clear. I created a example on codesandbox.io. Thx for your work!

[E-Kuerschner]

Thanks for setting that sandbox up. I will investigate deeper tomorrow. In the meantime perhaps try using the load method from useAudioPlayer. That may be the only way to support loading subsequent sounds for now.

[E-Kuerschner]

@Vang-z - good news! I was able to achieve autoplaying the next song without putting up a new release. Please review the code below and let me know if it doesn't work for you. Would you mind also advising how the documentation can be improved such that someone such as yourself could implement something like this on their own? Also feel free to push up a PR yourself if you would like to contribute to the docs

const songs = [sound1, sound2];
export function AutoPlayNextSound() {
    const [songIndex, setSongIndex] = useState(0);

    const { togglePlayPause, ready, playing } = useAudioPlayer({
        src: songs[songIndex],
        html5: true,
        autoplay: true,
        onend: () => {
            setSongIndex(index => index + 1);
        }
    });

    const { position, duration, seek } = useAudioPosition({
        highRefreshRate: true
    });

    if (!ready) return <h1>audio {songs[songIndex]} is loading</h1>
    return (
        <>
            <div>Currently playing: {songs[songIndex]}</div>
            <button onClick={togglePlayPause}>
                {playing ? "pause" : "play"}
            </button>
            <button onClick={() => seek(duration * 0.99)}>skip to end</button>
            <div>
                {position.toFixed(2)} / {duration.toFixed(2)}
            </div>
        </>
    );
}

export default AutoPlayNextSound;

The key bits here are setting the autoplay property and to not store the audio objects themselves in state, but rather a pointer to them.