react 录制音频_如何在React Native中录制音频

react 录制音频

In this tutorial, we are going to learn how to record and play audio to React Native apps. We are going to build a simple screen that supports features such as recording audio, playing audio files, pausing and resuming, as well as resetting audio streams. The final app will look like the image below.

在本教程中，我们将学习如何录制和播放音频到React Native应用程序。 我们将构建一个简单的屏幕，该屏幕支持录制音频，播放音频文件，暂停和恢复以及重置音频流等功能。 最终的应用程序将如下图所示。

Originally published at https://www.instamobile.io on August 20, 2020.

最初于 2020年8月20日 在 https://www.instamobile.io 上 发布 。

Recording and playing audio in mobile applications is a very popular feature. Fortunately, to record and play audio in React Native apps can be done easily. This is thanks to the Expo ecosystem that easily supports sound recording in React Native. However, if we need to add any feature that requires us to migrate off the Expo system to React Native CLI, we may need to put much more effort into its configuration.

在移动应用程序中录制和播放音频是非常受欢迎的功能。 幸运的是，在React Native应用程序中录制和播放音频可以轻松完成。 这要归功于Expo生态系统，该生态系统轻松支持React Native中的录音。 但是，如果我们需要添加任何需要从Expo系统迁移到React Native CLI的功能，则可能需要在其配置上付出更多的努力。

As a result, we may need to use a third-party package. After much research, I have come up with a package that meets our requirements for recording and playing audio in React Native. The package name is react-native-audio-recorder-player. The package is easy to configure and provides us with robust modules and components to implement an audio recorder and player in React Native applications.

因此，我们可能需要使用第三方程序包。 经过大量研究，我提出了一个满足我们在React Native中录制和播放音频的要求的软件包。 软件包名称是react-native-audio-recorder-player 。 该软件包易于配置，并为我们提供了强大的模块和组件，以在React Native应用程序中实现音频记录器和播放器。

Without further ado, let’s get started!

事不宜迟，让我们开始吧！

先决条件 (Prerequisites)

In order to go through this tutorial, we need to first prepare our React Native development environment. For this, we can easily follow other tutorials on Instamobile such as the one describing how to set up your React Native development environment.

为了完成本教程，我们需要首先准备我们的React Native开发环境。 为此，我们可以轻松地遵循有关Instamobile的其他教程，例如描述如何设置React Native开发环境的教程。

安装和设置软件包 (Installing and Setting Up the Package)

First, we need to install the react-native-audio-recorder-player package using yarn or npm. I prefer using yarn so I am going to use yarn and run the following command in the project Terminal:

首先，我们需要使用yarn或npm安装react-native-audio-recorder-player软件包。 我更喜欢使用yarn，所以我将使用yarn并在项目Terminal中运行以下命令：

yarn add react-native-audio-recorder-player

Then, we need to run the following command in order to run the app in the iOS device or simulator (simply replace ios with android if you are ru