反应播放器并加载多个URL源

Question

我有一个关于获取一系列音频文件并将它们合并为一个音频文件以供播放的快速问题。

我正在使用React Player并且认为可以通过url prop添加多个源到播放器并且它可以工作，但不幸的是，到目前为止我并非如此。

我从API接收我的音频文件，返回这样的文件......

我正在将评论的位置附加到我的应用流式网址，该网址是在配置文件中定义的，因此传递给React Player的网址文件将如下所示：    http://localhost/media/dump/comments/xxxxxxx.mp3

有没有人有关于如何将这些文件合并到一个我可以回放的文件中的任何提示/建议？或者有没有办法使用URL加载多个源到React Player？

感谢您提前回复， 希望我能够清楚地传达我的问题。

如果您需要更多信息，请告知我们，我很乐意添加更多代码来寻找解决方案。

Answer 1

您绝对可以有多个来源：https://www.npmjs.com/package/react-player#multiple-sources-and-tracks。

但是，它不会做您想要的。阅读以下答案：https://stackoverflow.com/a/18282461/8315348。我敢肯定，使用多个源可以实现与<audio>元素中相同的功能-如果浏览器无法播放一种类型的文件，则可以为同一文件提供多种文件类型。只会播放一次。尽管在文档中多个来源下方都提到了多个音轨，但此处不相关，因为<track>是字幕。

您可以在自己的demo中看到ReactPlayer的创建者如何使用多个源。如果单击右下方的“多个”按钮，您将看到拥有多个来源的感觉。它不会播放他放置在阵列中的三个视频，而只是播放其中一个。签出他的source code进行验证。

尽管如此，我知道另一个选择。请注意，在演示中，您可以随意在音轨和视频之间切换。您可以制作一个源数组，侦听播放器的onEnded事件，并在播放器结束时将播放器的URL设置为下一个源。

更改播放器的来源很棘手，但是可以做到。我唯一能做到的就是模仿该演示的工作方式：在组件的this.state中维护一个URL，用this.setState()对其进行更改，然后在包含播放器时编写如下内容：

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

即使在其他情况下更改道具会导致重新呈现，我也无法将URL存储在this.props中。