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

库必须具备的东西

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 在设计上是相似的。

录音

默认情况下也不支持录制。幸运的是,有一个名为 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.plistAndroidManifest.xml。 通常情况下,库作者也会在库自述文件中提醒这一点,并提供有关如何操作的基本说明。

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

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

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

推荐阅读
作者信息
AgoraTechnicalTeam
TA 暂未填写个人简介
文章
131
相关专栏
精选文章
82 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。