Play same audio twice, then move to the next audio file in React

Question

I'm trying to make an autoplay of audio files from an array, using the react-audio-player. I want to play each audio twice, and then automatically move to the next one.

I found a way to automatically play all the audios, but when I want to play the same audio second time, the player stops. So it plays the first audio, stops, then I click play again and it plays the first audio again and advances to the second, and then stops again.

I think the problem is that since the audio URL doesn't change, the player doesn't recognize it as a new audio.

I can't find almost any threads related to this issue, as it's quite specific. I will appreciate any help.

const userItems = [{ "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav" }, { "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav" }, { "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav" }]

const [repeatAudio, setRepeatAudio] = useState(true); // Determine if the audio has been played already

const [currentAudioIndex, setCurrentAudioIndex] = useState(0);

const audioSrc = userItems[currentAudioIndex].MP3

function setNextAudio() {
    if (repeatAudio) { // If the audio hasn't been played, keep same audio index
        setCurrentAudioIndex(i => i + 0)
        setRepeatAudio(false) 
    } else { // If it has been played, jump to the next index
        setCurrentAudioIndex(i => i + 1)
        setRepeatAudio(true)
    }
}

return (
    <div>
        <ReactAudioPlayer
            src={audioSrc}
            autoPlay
            controls
            onEnded={() => setNextAudio()}
        />
    </div>
)

}

Answer 1

I've cleaned this up a bit to make it easier to understand, but yes the key bit is the "replay" doesn't involve a URL change, and so autoPlay doesn't kick in. You have to manage that yourself by getting a reference to the audio element and prodding it directly.

import React, { useState, useRef } from "react";
import ReactAudioPlayer from "react-audio-player";

const userItems = [
  { MP3: "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav" },
  { MP3: "https://www2.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav" }
];

const PlayTwicePlayer = () => {
  const [audioPointer, setAudioPointer] = useState({
    index: 0,
    playedOnce: false
  });

  const audioPlayerRef = useRef(null);

  const audioSrc = userItems[audioPointer.index].MP3;

  function handleAudioEnded() {
    // Dont proceed to next track if already at the end of the array
    if (audioPointer.index >= userItems.length - 1) return;

    if (audioPointer.playedOnce) {
      // If they already played it, that means we just finished playing it a second time, and need to move to the next track.
      setAudioPointer((prev) => ({
        index: prev.index + 1,
        playedOnce: false
      }));
      return;
    } else {
      // If they hadn't already played it, we just finished the first run so we can set playedOnce to true now.
      // We must additionally seek back to 0 and play manually using a reference to the player because autoPlay does not
      // trigger since the URL didn't change.
      setAudioPointer((prev) => ({ ...prev, playedOnce: true }));
      audioPlayerRef.current.currentTime = 0;
      audioPlayerRef.current.play();
      return;
    }
  }

  return (
    <div>
      <ReactAudioPlayer
        src={audioSrc}
        autoPlay
        controls
        onEnded={handleAudioEnded}
        ref={(ref) => {
          if (!ref) return;
          audioPlayerRef.current = ref.audioEl.current;
        }}
      />
    </div>
  );
};

Note this won't give you seamless transitions. To do that you'd need the WebAudio API. Easy library wrappers for it exist like https://github.com/t-mullen/video-stream-merger and https://github.com/jaggad/crunker.