React Native Sound

为应用程序添加声音是吸引用户的绝佳方式。微小的新通知音、发送电子邮件的“嘶嘶”声，或者删除文件的“咔嚓”声，都可以为 React Native 应用创造更好的用户体验。

我们将探索 react-native-sound，这是一个强大的音频组件，可以轻松处理我们 React Native 应用中的声音相关任务。

你需要熟悉 React Native 的基础知识，包括 JSX、组件和样式。

React-native-sound 是一个用于在 iOS、Android 和 Windows 上播放声音片段的模块。它允许我们从各种来源添加音频，例如（原生）应用程序包、JavaScript 包或远程路径（本地存储或 URL）。

React-Native-Sound 是一个类组件，它通过使用预定义的方法来控制实例，而无需更新状态或 props。

尽管文档警告 react-native-sound 处于“alpha 质量，可能包含 bug”，但它目前是使用最广泛的 React Native 声音库。

配置 react-native-sound（iOS 和 Android）

如果你无法远程访问，则需要应用中想要播放的声音。

要通过包管理器（例如 npm 或 yarn）将 react-native-sound 添加到应用中，请在应用目录内输入以下命令：

如果你正在构建，则链接会在构建过程中处理。

对于 iOS，我们需要进入 iOS 目录并调用 pod install。它将添加 react-native Sound 的 pod。

将声音添加到 React Native 应用

现在，是时候添加你想要播放的声音了。我们将介绍一种更简单的方法，通过 assets 目录请求音频文件。对于 Android，我们需要创建一个目录，然后将声音复制到其中。

对于 iOS，请在 Xcode 中打开 Workspace，然后点击项目右侧，接着点击 Add Files to the {project_name}，如下图所示：

结果看起来像这样：

添加声音文件后，我们需要构建应用并在模拟器或真实设备上运行它。

成功运行后，就可以进行编码部分了。

首先，我们需要将 Sound 导入到应用程序中：

我们将要播放，并且在设置 Sound 之前需要指定 Sound 的范围。

使用以下代码开始播放声音：

上面的代码使用了第一个参数 ding.mp3，第二个参数 Sound.MAIN_BUNDLE，表示从 bundle 中获取文件，第三个参数是回调。

\``getDuration 用于获取音频文件的持续时间（以秒为单位），getNumberOfChannels 用于获取音频通道数。

我们可以使用以下方法：

这里，1 表示最高音量，0 表示最低音量。例如，要将音量降低 50%，可以将其设置为 0.5。

要播放文件，我们可以使用以下声音播放方法：

回调会在播放完成时发生。

总结上述步骤：

• 设置播放的声音类别
• 开始播放声音文件
• 调整音量（如有必要）
• 播放声音

以下是从 bundle 播放声音的最终代码：

导入声音文件

我们使用相同的旧要求或导入来获取文件实例，并使用 react-native-sound 进行转换。

导入文件 -

使用从 assets 导入的文件或 required 文件而不是 bundled 文件时，区别在于您无需为文件指定基本路径。相反，回调会代替它。

以下是用于播放已导入文件的组件的代码：

要播放声音，请点击播放按钮。

从远程路径播放声音文件。

您需要从本地存储播放远程文件。这与使用 react-native-sound 运行 bundled 文件一样简单。

您需要将 URL 作为第一个参数传递给 Sound，并将第二个参数设置为 null，因为文件是远程的或本地存储的，而不是来自应用。

以下是播放、暂停和释放应用已关闭或组件已卸载的音频的示例：

.release() 用于释放播放音频片段的内存。

在组件卸载或无法再次播放音频时释放内存非常重要。这有助于避免内存泄漏。

功能矩阵

react-native-sound 不支持流式传输。在 iOS 或 Android 上，该库使用 AVAudioPlayer，而不是 AVPlayer。

如何为 React Native 应用添加声音

如果使用 React Native 0.60 或更高版本，您很可能会安装 pod，但我们稍后会讨论。

我们要做的第一件事是打开命令提示符/终端并创建一个 React Native 项目。

完成此操作后，将创建一个项目文件夹。在您喜欢的文本编辑器中打开项目，然后在文本编辑器中打开终端。要在 Mac 上打开它，您必须同时按下“Ctrl”和“`”。

输入命令

这将安装 React Native Sounds，它允许您从项目或 URL 播放声音。

您需要链接依赖项。如果您使用的是 React Native 0.60，可以运行以下命令：

cd ios && pod install

目录已更改为“ios”，并且已开始添加依赖项。

如果您使用的是早期版本的 React Native，可以使用以下命令：

运行以下命令并在 iOS 上启动模拟器后；

src/main/res

注意：我们要播放的声音文件名应为小写，必要时用下划线分隔。

在 res 文件夹内创建另一个名为“raw”的文件夹，其中将包含您的本地声音文件。

我们需要在 Xcode 中打开您的 xcworkspace 文件（如果您使用的是 React Native 0.60 或更高版本）。如果我们想从 iOS 模拟器播放声音文件，请改为在 Xcode 中打开 xcodeproj 文件。

右键单击左侧的项目名称，然后单击“Add files to the project name”。

在您的硬盘上找到声音文件，勾选“Copy items if necessary”，然后单击“Add”。现在您可以在项目中看到声音文件。

现在，我们需要使用以下命令在 App.js 文件中导入该包。

然后，我们将创建一个“PlayLocalSoundFile”方法，并设置声音范围以进行播放，因为我们需要播放声音。

现在，我们在第一个 touchable opacity 按下时运行，因此将代码复制到 touchable opacity 组件中。

它看起来像这样：

从远程 URL 播放声音

从远程 URL 播放声音的过程相同，因此请继续创建一个名为“PlayRemoteURLSoundFile”的方法。它将包含播放远程 URL 声音的代码。

现在，像下面这样将类别设置为 playback，因为我们想播放声音而不是录音。

由于我们不是从应用的主 bundle 播放声音文件，所以我们不需要传递 MAIN_BUNDLE。

相反，我们可以传递 void，这将是一个错误回调。远程 URL 方法将如下面的代码所示。

用例示例

我们在数据库表中有一个名为“soundfilename”的列，该列等于您要播放的声音文件的名称。

您可以检索声音文件名，将其放入方法参数中，然后将此参数放入“new sound”变量的第一个参数中。

结论

react-native-sound 是一个很棒的模块，可以为 React Native 应用添加声音或创建任何简单的音频播放器。

如果您想了解更多关于它的信息，我们建议尝试 Expo Unimodules 的 expo-av 模块来播放 React Native 应用中的音频或视频文件。