我有一个关于获取一组音频文件并将它们组合成一个音频文件进行播放的快速问题。
我正在使用 React Player,并认为可以通过 url 属性将多个源添加到播放器中,并且它会起作用,但不幸的是,到目前为止,我的情况并非如此。
我从一个返回文件的 API 接收我的音频文件......
我将评论的位置附加到我的应用程序流 url,它在配置文件中定义,因此传递到 React Player 的 url 文件将如下所示:
http://localhost/media/dump/comments/xxxxxxx.mp3
有没有人有任何关于如何将这些文件组合成一个我可以播放的文件的提示/建议?或者有没有办法使用 URL 将多个源加载到 React Player 中?
感谢您提前回复,
希望我能够清楚地传达我的问题。
如果您需要更多信息,请告诉我,我很乐意添加更多代码以找到解决方案。
最佳答案
您绝对可以有多个来源:https://www.npmjs.com/package/react-player#multiple-sources-and-tracks .
但是,它不会做你想做的事。阅读此答案:https://stackoverflow.com/a/18282461/8315348 .我很确定使用多个来源可以完成与 <audio>
中相同的事情。元素——你给它同一文件的多种文件类型,以防浏览器无法播放一种类型。只有一个会被播放。多个音轨,虽然在多个来源下方的文档中提到,但在此处无关紧要,因为 <track>
s 是字幕。
你可以在他的 demo 中看到 ReactPlayer 的创建者如何使用多个源。 .如果您单击右下角的“多个”按钮,您将看到拥有多个来源的感觉。它不播放他放在数组中的三个视频——它只播放其中一个。看看他的source code来验证这一点。
尽管如此,我知道另一种选择。请注意,在演示中,您可以随意在音轨和视频之间切换。你可以只做一个源数组,听玩家的onEnded
事件,并在播放器结束时将播放器的 URL 设置为下一个源。
更改播放器的来源很棘手,但可以做到。我能做到的唯一方法是模仿演示的工作方式:在组件的 this.state
中维护一个 URL。 , 用 this.setState()
更改它,当你包含播放器时,写如下内容:<ReactPlayer url={ this.state.url } playing={ this.state.playing } />
我无法将 URL 存储在 this.props
中即使在其他情况下更改 Prop 会导致重新渲染。
关于javascript - React Player 和加载多个 URL 源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50608456/