库必须具备的东西

1_JqT1EXTAlXCt-QSJXlcgeQ1400×618 75.2 KB

React Native 变得越来越流行，但仍有一些地方存在bug。我喜欢声音，以及它所带来的一切，所以我对React Native很感兴趣，想要看看 React Native 是如何处理录音和播放声音的。

播放声音

这太隐蔽了！在撰写本文时（v. 0.52-rc），react-native docs 中没有关于播放支持或录制的内容。幸运的是，开源社区从来不关闭！许多库添加了大量功能，但我只专注于最流行并被广泛使用的库。

React-native-声音

这是我开始接触的第一个库。它看起来很简单，有一个小的 API 并能支持人们的日常操作（音量控制、暂停、播放、设置时间等）。这个库的伟大之处在于它甚至支持播放来自网络的声音。这个选项没有很好的文档记录，但要使用它，我们必须在创建 Sound 实例时将 null 作为第二个参数传递。具体如下：

import Sound from 'react-native-sound';

const sound = new Sound('http://sounds.com/some-sound', null, (error) => {
  if (error) {
    // do something
  }
  
  // play when loaded
  sound.play();
});

唯一的缺点是项目似乎没有得到积极的维护，并且有 20 个开放的拉取请求。除此之外，到目前为止我没有遇到任何更大的问题。

React-native-视频

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

这个项目背后有一个更大的社区，还有一些功能在 react-native-sound 中尚不可用或没有得到很好的支持，比如在后台播放声音或访问 onProgress、onLoadStart、onLoad、onPlay 和其他。

在这种情况下，作者想要创建一些更类似于 HTML5 视频规范的东西，它同样适用于音频，因为这两个 API 在设计上是相似的。

image951×627 8.32 KB

录音

默认情况下也不支持录制。幸运的是，有一个名为 react-native-audio 的库，可以帮助解决这个问题。API 非常简单。它基本上只允许开始/停止录音，并指定我们想要保存录音的位置和方式。该库没有附带播放器，这意味着你可能需要上述条件之一来播放录制的声音。

该库允许我们控制采样率、音频质量、通道、音频编码、计量（仅限 iOS）和音频编码比特率（仅限 Android）。react-native-audio文档中列出了所有可用的编码。

import { AudioRecorder, AudioUtils } from 'react-native-audio';

let audioPath = AudioUtils.DocumentDirectoryPath + '/test.aac';

AudioRecorder.prepareRecordingAtPath(audioPath, {
  SampleRate: 22050,
  Channels: 1,
  AudioQuality: "Low",
  AudioEncoding: "aac"
});

Expo怎么样？

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

const soundObject = new Expo.Audio.Sound();

try {
  await soundObject.loadAsync(require('./assets/sounds/hello.mp3'));
  await soundObject.playAsync();
  // Your sound is playing!
} catch (error) {
  // An error occurred!
}

有件事要记住……

因为这些库正在使用需要权限的功能，例如麦克风，所以需要编辑特定于平台的文件，例如 Info.plist 和 AndroidManifest.xml。 通常情况下，库作者也会在库自述文件中提醒这一点，并提供有关如何操作的基本说明。

react-native 中播放和录音的状态还可以，当然，还可以更好。

也许用 react-native 构建下一个 Spotify 不是一个好主意（除非你也了解每个特定平台），但对于一个简单的音乐播放器或广播应App来说，它会做得很好。

原文作者 Maciej Matuszewski
原文链接 https://medium.com/applantic/getting-started-with-sound-audio-in-react-native-e1dc2fd50b78