0

我有一个关于获取一组音频文件并将它们组合成一个音频文件进行播放的快速问题。

我正在使用 React Player,并认为可以通过 url 属性将多个源添加到播放器中,并且它会起作用,但不幸的是,到目前为止,我的情况并非如此。

我从一个返回文件的 API 接收我的音频文件...... 位置是文件的流式传输位置

我将评论的位置附加到我的应用程序流 url,它在配置文件中定义,因此传递到 React Player 的 url 文件将如下所示: http://localhost/media/dump/comments/xxxxxxx.mp3

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

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

如果您需要更多信息,请告诉我,我很乐意添加更多代码以找到解决方案。

4

1 回答 1

1

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

但是,它不会做你想做的事。阅读此答案:https ://stackoverflow.com/a/18282461/8315348 。我很确定使用多个源可以完成与在<audio>元素中相同的事情——你给它同一文件的多个文件类型,以防浏览器无法播放一种类型。只有一个会被播放。多个音轨,虽然在多个来源下面的文档中提到,但在这里无关紧要,因为<track>s 是字幕。

您可以在他的演示中看到 ReactPlayer 的创建者如何使用多个源。如果您单击右下角的“多个”按钮,您将看到拥有多个来源的感觉。它不播放他放在数组中的三个视频——它只播放其中一个。查看他的源代码以验证这一点。

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

更改播放器的来源很棘手,但可以做到。我能做到的唯一方法是模仿演示的工作方式:在你的组件中维护一个 URL this.state,用 更改它this.setState(),当你包含播放器时,编写如下内容:

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

this.props即使在其他情况下更改道具会导致重新渲染,我也无法存储 URL 。

于 2019-01-05T21:43:31.427 回答