javascript - React Player 和加载多个 URL 源

标签 javascript reactjs audio mp3 react-player

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

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

我从一个返回文件的 API 接收我的音频文件......
the location is the streaming location of the file

我将评论的位置附加到我的应用程序流 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/

相关文章:

javascript - .map 在功能性 React 组件的返回中不起作用

javascript - 如何根据字符串的长度动态修改数组中的值?

JavaScript 或 jquery 加载器

reactjs - 将 map 拟合到 react 传单中的要素图层边界

javascript - 为什么 &lt;script src =""> 不起作用?

使用 Phonegap/Cordova 收听声音和记录音量的 Android 应用程序

iphone - CMSampleBufferRef 不释放内部内存

java - 录音期间发生异常……!

java - Javascript和Java进行相同的验证

javascript - 从 ExtJS 4 迁移到 ExtJS 5