CODEWITHSUNDEEP
javascriptreactjsaudiomp3react-player
Nathan Shanko
Nathan Shanko

Reputation: 66

React Player and Loading Multiple URL sources

I have a quick question regarding taking an array of audio files and combing them into one audio file for playback.

I am using React Player and thought that it would be possible to add multiple sources in to the player through the url prop and that it would work, but unfortunately that has not been the case for me so far.

I am receiving my audio files from an API that returns the files like so... the location is the streaming location of the file

I'am appending the comment's location to my apps streaming url, which is defined in a config file, so the file the url that is passed into a React Player will look like this: http://localhost/media/dump/comments/xxxxxxx.mp3

Does anyone have any tips/suggestions on how I would be able to combine such files into one file that I could just play back? Or is there a way to load multiple sources into the React Player with URL's?

Thank you for your response in advance, hopefully I was able to communicate my question clearly.

If you need more info please let me know, I would be glad to add more code to find a solution.

Upvotes: 1

Views: 7566

Answers (1)

Andrew Puglionesi
Andrew Puglionesi

Reputation: 973

You can definitely have multiple sources: https://www.npmjs.com/package/react-player#multiple-sources-and-tracks.

However, it won't do what you want. Read this answer: https://stackoverflow.com/a/18282461/8315348. I'm pretty sure using multiple sources accomplishes the same thing as it does in an <audio> element--you give it multiple file types of the same file in case one type can't be played by the browser. Only one will ever be played. Multiple tracks, although mentioned in the docs just below multiple sources, are irrelevant here because <track>s are subtitles.

You can see how the creator of ReactPlayer used multiple sources in his demo. If you click on the button at the bottom right that says "Multiple," you'll see what it's like to have multiple sources. It doesn't play the three videos he puts in an array--it just plays one of them. Check out his source code to verify this.

Despite that, I know of another option. Notice that in the demo, you can switch between audio tracks and videos at will. You could just make an array of sources, listen for the player's onEnded event, and set the player's URL to the next source when the player ends.

Changing the source of the player is tricky, but it can be done. The only way I could do it is by mimicking the way the demo works: maintain a URL in your component's this.state, change it with this.setState(), and when you include the player, write something like:

<ReactPlayer url={ this.state.url } playing={ this.state.playing } />

I couldn't store the URL in this.props even though in other cases changing props causes re-rendering.

Upvotes: 1

Related Questions