React Native中的声音(音频)入门

React Native越来越受欢迎,但是仍然存在一些无法很好处理的地方。 我喜欢声音以及声音的所有内容,所以自然而然地我想玩转,并检查React Native如何处理录音和播放声音。

这不是显而易见的! 在撰写本文时(v。0.52-rc),在react-native文档中没有关于回放支持或录制的任何内容。 幸运的是,开源社区永无止境! 有许多添加了这些功能的库,但我只关注那些最流行且被广泛使用的库。

反应本地声音

这是我开始使用的第一个库。 看起来确实很简单,它具有一个小的API,并且很好地支持了您想用声音进行的所有操作(音量控制,暂停,播放,设置时间等)。 这个库的好处是它甚至支持播放网络声音。 这个选项没有很好的文档说明,但是要使用它,我们必须在创建Sound实例时将null作为第二个参数传递。 看起来像这样:

唯一的缺点是,该项目似乎没有得到积极维护,并且有20个未完成的请求请求。 除此之外,到目前为止,我没有遇到更大的问题。

反应本机视频

这似乎是一个奇怪的选择,但事实并非如此。 React-native-video主要用于视频播放,但事实证明,很多人只使用它来控制声音。

这个项目背后有一个更大的社区,还有一些功能尚不可用或在本机声音中没有得到很好的支持,例如在后台播放声音或访问诸如onProgress,onLoadStart,onLoad,onPlay和其他。

在这种情况下,作者希望创建与HTML5视频规范更加相似的内容。 由于这两个API在设计上是相似的,因此它也与音频完美配合。

默认情况下还不支持录制。 幸运的是,有一个名为react-native-audio的库对此提供了帮助。 该API非常简单。 它基本上只允许开始/停止记录,并指定我们要保存记录的位置和方式。 该库没有附带播放器,这意味着您可能需要上述播放器之一才能播放录制的声音。

该库使我们可以控制采样率,音频质量,通道,音频编码,计量(仅适用于iOS)和音频编码比特率(仅适用于Android)。 react-native-audio文档中列出了所有可用的编码。

使用Expo进行开发时,默认情况下支持播放和录制声音。 就个人而言,我没有尝试过,但是该API似乎有据可查且简单。 Expo SDK文档中提供了有关如何使用它的所有信息。

由于这些库正在使用需要许可的功能(例如麦克风),因此需要编辑特定于平台的文件,例如Info.plistAndroidManifest.xml。 通常,库作者还会在libs自述文件中提醒您这一点,并提供有关如何执行此操作的基本说明。


在本机中播放和录制声音的状态还可以,但是当然可以更好。

也许还没有一个以react-native构建下一个Spotify的好主意(至少除非您也了解每个特定平台),但是对于简单的音乐播放器或广播应用程序来说,它就可以正常工作。


如果您觉得本文有用,请点击👏按钮!

关于作者
Maciej主要专注于前端开发,但他喜欢有关计算机科学的一切。 您可以在GitHub或LinkedIn上找到他。