库     

react-native-audio    录音

react-native-sound    播放

安装

略

用法

import {AudioRecorder,AudioUtils} from 'react-native-audio'

一、录音

录音属性值

1.1、开始录音

手动调用

调用录音方法

async record(){

console.log("this.state.recording = ",this.state.recording);

// 如果正在录音

if(this.state.recording){

returnAlert.alert('正在录音中!');

}

//如果没有获取权限

if(!this.state.hasPermission){

console.log("没有获取录音权限")

returnAlert.alert('没有获取录音权限!');

}

//如果暂停获取停止了录音

if(this.state.stoppedRecording){

console.log("录音完成");

this.prepareRecordingPath(this.state.audioPath);

}

this.setState({recording:true});

try{

constfilePath=awaitAudioRecorder.startRecording();

}catch(error){

console.log(error);

}

}

1.2 检查权限（推荐放在初始化函数里）

componentDidMount(){

// console.log("初始化",this.props.userInfo);

console.log("获取权限");

letthat=this;

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)=>{

console.log("录音结束啦 = ",data,"state.",this.state.yyTxt);

if(Platform.OS==='ios'){

this.finishRecording(data.status==="OK",data.audioFileURL);

}

};

});

console.log("初始化完成");

}

1.3、停止录音

手动停止

停止录音

// 停止录音

asyncstop(){

clearInterval(this._timer);

// 没有录音, 无需停止!

if(!this.state.recording){

return;

}

this.setState({

stoppedRecording:true,

recording:false

});

try{

constfilePath=awaitAudioRecorder.stopRecording();

if(Platform.OS==='android'){

this.finishRecording(true,filePath);

}

returnfilePath;

}catch(err){

console.log(err);

}

}

1.4录音结束的回调函数

finishRecording(didSucceed,filePath){

letthat=this;

if(didSucceed&&that.state.yyTxt===sendBtnName){

this.props.chatAction.sendyuyinMsg(filePath,that.state._second,that.state.groupId); //录音结束，上传录音

}

that.setState({

finished:didSucceed,yyTxt:yuyinBtnName,_second:0

});

}

二、播放

import Sound from 'react-native-sound'

方法一：固定文件类型，选择下载下来做缓存，优势不用我说了吧！

所用插件：import RNFetchBlob from "react-native-fetch-blob";

//下载下来

// let dirs = RNFetchBlob.fs.dirs;

// RNFetchBlob.config({

//    fileCache:true,

//    appendExt:"mp3",

// }).fetch('get',url,{}).then((res)=>{

//    console.log("保存到文件 = ",res.path());

//    let s = new Sound(res.path(),'',

//        (e)=>{

//        if(e){

//            console.log("语音听取失败error = ",e);

//            res.flush();

//            Toast.fail("网络不通",1);

//            return ;

//        }

//        s.play((success)=>{

//            if (success){

//                Toast.success("播放成功",1);

//            }else{

//                Toast.fail("文件损坏，请重试",1);

//            }

//            res.flush();

//        });

//    });

// })

方法二：直接读取服务器文件路径 (不限类型，具体我也说不清，反正acc格式、mp3格式都可以直接读取)

lets=newSound({uri:url},(e)=>{

if(e){

console.log("语音听取失败error = ",e);

Toast.fail("网络不通",1);

return;

}

s.play((success)=>{

if(success){

Toast.success("播放成功",1);

}else{

Toast.fail("文件损坏，请重试",1);

}

Toast.hide();

});

});