React Native 音频波形图组件安装与配置指南

React Native 音频波形图组件安装与配置指南

react-native-audio-waveform React Native component to show audio waveform with ease in react native application ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-native-audio-waveform

1. 项目基础介绍

本项目是一个React Native开源组件，主要用来在React Native应用中生成和渲染音频波形图。它能够高效地为录制好的音频文件生成视觉表示，同时也可以在录音过程中实时绘制波形图。

主要编程语言：JavaScript

2. 项目使用的关键技术和框架

• React Native：用于构建原生移动应用的JavaScript框架。
• CocoaPods：iOS项目依赖管理工具。

3. 项目安装和配置的准备工作与详细步骤

准备工作

在开始之前，确保你的开发环境满足以下要求：

• 安装了Node.js和npm。
• 安装了React Native CLI。
• 准备好iOS和Android的开发环境。

安装步骤

第一步：安装依赖包

在你的React Native项目中，打开终端，运行以下命令来安装react-native-audio-waveform组件和必要的依赖react-native-gesture-handler。

npm install @simform_solutions/react-native-audio-waveform react-native-gesture-handler

或者，如果你使用的是Yarn，运行：

yarn add @simform_solutions/react-native-audio-waveform react-native-gesture-handler

第二步：配置iOS项目

对于iOS项目，你需要安装CocoaPods。在项目根目录下运行以下命令：

npx pod-install

确保你的Podfile文件配置正确。

第三步：添加权限

• iOS：在info.plist文件中添加NSMicrophoneUsageDescription权限，并提供相应的描述信息。

<key>NSMicrophoneUsageDescription</key>
<string>Needed permission to record audio</string>

• Android：在AndroidManifest.xml文件中添加RECORD_AUDIO权限。

<uses-permission android:name="android.permission.RECORD_AUDIO" />

第四步：使用组件

在你的React Native代码中，按照以下示例使用Waveform组件。

静态波形图示例：

import { Waveform, type IWaveformRef } from '@simform_solutions/react-native-audio-waveform';

const path = ''; // 音频文件路径
const ref = useRef<IWaveformRef>(null);

<Waveform
  mode="static"
  ref={ref}
  path={{ item: path }}
  candleSpace={2}
  candleWidth={4}
  scrubColor="white"
  onPlayerStateChange={(playerState) => console.log(playerState)}
  onPanStateChange={(isMoving) => console.log(isMoving)}
/>

实时录音波形图示例：

import { Waveform, type IWaveformRef } from '@simform_solutions/react-native-audio-waveform';

const ref = useRef<IWaveformRef>(null);

<Waveform
  mode="live"
  ref={ref}
  candleSpace={2}
  candleWidth={4}
  onRecorderStateChange={(recorderState) => console.log(recorderState)}
/>

确保按照项目文档中的说明正确使用组件，并根据需要调整参数。

完成以上步骤后，你就可以在你的React Native应用中使用音频波形图组件了。

react-native-audio-waveform React Native component to show audio waveform with ease in react native application ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-native-audio-waveform