Search code examples
javascriptreact-nativehtml5-audio

Reproduce multiple tracks with ReactAudioPlayer

I succesfully used react-audio-player to reproduce an audio track; now I need to reproduce more than one track, and possibly to reproduce them sequentially (but without autoPlay: I need to start the first one manually and then the following start by themselves). Is it possible to do that?

What I did:

<ReactAudioPlayer
     src="https://www.examplelink1.com/example1.mp3"
     controls
/>

What I need: 

<ReactAudioPlayer
     src=["https://www.examplelink1.com/example1.mp3", "https://www.examplelink2.com/example2.mp3"]
     controls
/>
Solution

  • If you read the docs the src attribute type is "String", so you can't pass an array.

    One simple way could be to create a player component for each track, use the onEnded attribute to catch the current endend track and change te app state consequently.

    Your state would have a currentIndex: 0 attribute which is current track's index. When you map your array of tracks you check if the current element'index of the array equals to currentIndex as autoplay attribute value.

    Within the onEnded callback you increment the index.