录音
官方配置未详细给出,
这里写下步骤:
1: 安装依赖:
npm install react-native-audio --save
自动安装: 可以试下, 如果不行在按步骤手动配置安装
react-native link react-native-audio
2: 手动安装:
- 1:
android/settings.gradle:
+ include ':react-native-audio'
+ project(':react-native-audio').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio/android')
-
2:
android/app/build.gradle:dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules + compile project(':react-native-audio') } -
3:
android/app/src/main/java/com/XXX(项目名称)/MainApplication.java:+ import com.rnim.rn.audio.ReactNativeAudioPackage; public class MainApplication extends Application implements ReactApplication { //...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( + new ReactNativeAudioPackage(), new MainReactPackage() ); } ...... } -
4:
android/app/src/main/AndroidManifest.xml<uses-permission android:name="android.permission.RECORD_AUDIO" />
主要的方法, 由于都是异步 ,所以需要按照代码例子中使用 async await 函数
1: 录音:
AudioRecorder.startRecording()且返回文件路径,
2: 停止:AudioRecorder.stopRecording()且返回文件路径,
3: 暂停:AudioRecorder.pauseRecording()且返回文件路径,
4: 播放声音, 使用的是 react-native-sound
代码:
首先请确保按照步骤安装了依赖 react-native-audio 和 react-native-sound
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, Platform, PermissionsAndroid } from 'react-native';
import { Button, WingBlank, WhiteSpace } from 'antd-mobile';
import NavBar from './NavBar';
import Sound from 'react-native-sound'; // 播放声音组件
import {AudioRecorder, AudioUtils} from 'react-native-audio';
// let audioPath = AudioUtils.DocumentDirectoryPath + '/test.aac';
// 目录/data/user/0/com.opms_rn/files/test.aac
class TestRecordAudio extends Component {
constructor(props){
super(props);
this.state = {
currentTime: 0.0, //开始录音到现在的持续时间
recording: false, //是否正在录音
stoppedRecording: false, //是否停止了录音
finished: false, //是否完成录音
audioPath: AudioUtils.DocumentDirectoryPath + '/test.aac', //路径下的文件名
hasPermission: undefined, //是否获取权限
};
this.prepareRecordingPath = this.prepareRecordingPath.bind(this); //执行录音的方法
this.checkPermission = this.checkPermission.bind(this); //检测是否授权
this.record = this.record.bind(this); //录音
this.stop = this.stop.bind(this); //停止
this.play = this.play.bind(this); //播放
this.pause = this.pause.bind(this); //暂停
this.finishRecording = this.finishRecording.bind(this);
}
prepareRecordingPath(audioPath){
AudioRecorder.prepareRecordingAtPath(audioPath, {
SampleRate: 22050,
Channels: 1,
AudioQuality: "Low", //录音质量
AudioEncoding: "aac", //录音格式
AudioEncodingBitRate: 32000 //比特率
});
}
checkPermission() {
if (Platform.OS !== 'android') {
return Promise.resolve(true);
}
const rationale = {
'title': '获取录音权限',
'message': 'XXX正请求获取麦克风权限用于录音,是否准许'
};
return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale)
.then((result) => {
// alert(result); //结果: granted , PermissionsAndroid.RESULTS.GRANTED 也等于 granted
return (result === true || PermissionsAndroid.RESULTS.GRANTED)
})
}
async record() {
// 如果正在录音
if (this.state.recording) {
alert('正在录音中!');
return;
}
//如果没有获取权限
if (!this.state.hasPermission) {
alert('没有获取录音权限!');
return;
}
//如果暂停获取停止了录音
if(this.state.stoppedRecording){
this.prepareRecordingPath(this.state.audioPath);
}
this.setState({recording: true});
try {
const filePath = await AudioRecorder.startRecording();
} catch (error) {
console.error(error);
}
}
async stop() {
// 如果没有在录音
if (!this.state.recording) {
alert('没有录音, 无需停止!');
return;
}
this.setState({stoppedRecording: true, recording: false});
try {
const filePath = await AudioRecorder.stopRecording();
if (Platform.OS === 'android') {
this.finishRecording(true, filePath);
}
return filePath;
} catch (error) {
console.error(error);
}
}
async play() {
// 如果在录音 , 执行停止按钮
if (this.state.recording) {
await this.stop();
}
// 使用 setTimeout 是因为, 为避免发生一些问题 react-native-sound中
setTimeout(() => {
var sound = new Sound(this.state.audioPath, '', (error) => {
if (error) {
console.log('failed to load the sound', error);
}
});
setTimeout(() => {
sound.play((success) => {
if (success) {
console.log('successfully finished playing');
} else {
console.log('playback failed due to audio decoding errors');
}
});
}, 100);
}, 100);
}
async pause() {
if (!this.state.recording) {
alert('没有录音, 无需停止!');
return;
}
this.setState({stoppedRecording: true, recording: false});
try {
const filePath = await AudioRecorder.pauseRecording();
// 在安卓中, 暂停就等于停止
if (Platform.OS === 'android') {
this.finishRecording(true, filePath);
}
} catch (error) {
console.error(error);
}
}
finishRecording(didSucceed, filePath) {
this.setState({ finished: didSucceed });
console.log(`Finished recording of duration ${this.state.currentTime} seconds at path: ${filePath}`);
}
componentDidMount () {
// 页面加载完成后获取权限
this.checkPermission().then((hasPermission) => {
this.setState({ hasPermission });
//如果未授权, 则执行下面的代码
if (!hasPermission) return;
this.prepareRecordingPath(this.state.audioPath);
AudioRecorder.onProgress = (data) => {
this.setState({currentTime: Math.floor(data.currentTime)});
};
AudioRecorder.onFinished = (data) => {
if (Platform.OS === 'ios') {
this.finishRecording(data.status === "OK", data.audioFileURL);
}
};
})
// console.log(this.props.navigator)
// console.log(audioPath)
}
render() {
return (
<View style={{flex:1}}>
<NavBar
title="录音"
goBack={()=> this.props.navigator.pop()}
/>
<WingBlank size="lg"style={{paddingTop: 20}}>
<WhiteSpace size="md" />
<Button type="primary" size="large" onClick={this.record}>录音</Button>
<WhiteSpace size="md" />
<Button type="primary" size="large" onClick={this.stop}>停止录音</Button>
<WhiteSpace size="md" />
<Button type="primary" size="large" onClick={this.pause}>暂停录音</Button>
<WhiteSpace size="md" />
<Button type="primary" size="large" onClick={this.play}>播放录音</Button>
</WingBlank>
</View>
)
}
}
export default TestRecordAudio;
