React Native Audio Waveform 使用教程

React Native Audio Waveform 使用教程

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-audio-waveform 是一个React Native的原生模块，用于生成和渲染音频波形。该模块设计用于高效地为录制好的音频文件生成视觉表示，并能在音频录制过程中实时绘制波形。

2. 项目快速启动

首先，确保你已经设置好了React Native开发环境。

安装

在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

添加录音权限

iOS

如果你想在iOS中使用录音功能，你需要在info.plist中添加NSMicrophoneUsageDescription权限，并提供相应的描述。

<key>NSMicrophoneUsageDescription</key>
<string>需要权限以录制音频</string>

Android

对于Android，需要在AndroidManifest.xml中添加RECORD_AUDIO权限：

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

使用

静态波形

如果你想展示一个已存在音频文件的波形，需要使用static模式。

import { Waveform, 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)}
/>

实时录音波形

如果你想录制音频并展示波形，需要使用live模式。

import { Waveform, 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)}
/>

3. 应用案例和最佳实践

• 在音乐播放器中展示音频波形。
• 在录音应用中实时显示录音波形。
• 利用波形界面进行音频编辑。

4. 典型生态项目

• react-native-gesture-handler：处理触摸事件，与react-native-audio-waveform协同工作，提供用户交互。

以上就是react-native-audio-waveform的基本使用教程。希望对你有所帮助！

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