最近在做社交功能誓焦，需要收發(fā)語音双妨，所以就仿照微信做了一個語音錄制功能

使用的是react-native-audio

GitHub地址：https://github.com/jsierles/react-native-audio
配置按照GitHub上配置就可以，挺好配置的

iOS支持的編碼格式：lpcm, ima4, aac, MAC3, MAC6, ulaw, alaw, mp1, mp2, alac, amr
Android支持的編碼：aac, aac_eld, amr_nb, amr_wb, he_aac, vorbis

簡單說下我遇到的問題,android上錄制的在ios上不能播放最后發(fā)現(xiàn)錄制的語音設(shè)置參數(shù)少設(shè)置了
最后把錄制格式設(shè)定為如下android和ios問題完美解決

        AudioRecorder.prepareRecordingAtPath(audioPath, {
            SampleRate: 22050,
            Channels: 1,
            AudioQuality: 'Low',
            AudioEncoding: 'aac',
            OutputFormat: 'aac_adts',
        });

效果圖如下：

總體思路就是把下面的小方塊注冊為手勢模塊去監(jiān)聽用戶手勢的變化,然后在state里面設(shè)置一些參數(shù)根據(jù)手勢的變化給用戶反饋

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

/*
                this.audioPath
                注意這個是你錄音后文件的路徑+文件名仑嗅，
                可以使用react-native-audio下的AudioUtils路徑也可以使用其他路徑，
                如果名稱重復(fù)會覆蓋掉原有的錄音文件
*/
    this.audioPat = AudioUtils.DocumentDirectoryPath + '/test.aac', //路徑下的文件名
        this.state = {
            actionVisible: false,
            paused: false,
            recordingText: "",
            opacity: 'white',
            recordingColor: "transparent",
            text: I18n.t('message.Chat.Voice.holdToTalk'),
            currentTime: null,        //開始錄音到現(xiàn)在的持續(xù)時間
            recording: false,         //是否正在錄音
            stoppedRecording: false,  //是否停止了錄音
            finished: false,          //是否完成錄音
            hasPermission: undefined, //是否獲取權(quán)限
        }

  componentDidMount() {
    this.prepareRecordingPath(this.audioPath);
    //添加監(jiān)聽
    AudioRecorder.onProgress = (data) => {
      this.setState({
        currentTime: Math.floor(data.currentTime)
      }, () => {
        if (this.state.currentTime >= maxTime) {
          Alert.alert(I18n.t('message.Chat.Voice.speakTooLong'))
          this._cancel(false)
        }
      });
    };
    AudioRecorder.onFinished = (data) => {
      // Android callback comes in the form of a promise instead.
      if (Platform.OS === 'ios') {
        this._finishRecording(data.status === "OK", data.audioFileURL);
      }
    };
    //手勢
    this.Gesture = {
      onStartShouldSetResponder: (evt) => true,
      onMoveShouldSetResponder: (evt) => true,
      onResponderGrant: (evt) => {
        if (!this.state.hasPermission) {
          Alert.alert(I18n.t('message.Chat.Voice.jurisdiction'))
        }
        this.setState({
          opacity: "#c9c9c9",
          recordingText: I18n.t('message.Chat.Voice.fingerStroke'),
          text: I18n.t('message.Chat.Voice.releaseEnd'),
          icon: "ios-mic",
          recordingColor: 'transparent'
        }, _ => RecordView.show(this.state.recordingText, this.state.recordingColor, this.state.icon));
        this._record();
      },
      onResponderReject: (evt) => {
      },
      onResponderMove: (evt) => {
        if (evt.nativeEvent.pageY < this.recordPageY - UpperDistance) {
          if (this.state.recordingColor != 'red') {
            this.setRecordView(I18n.t('message.Chat.Voice.loosenFingers'), 'red', "ios-mic-off")
          }
        } else if (this.state.recordingColor != 'transparent') {
          this.setRecordView(I18n.t('message.Chat.Voice.fingerStroke'), 'transparent', "ios-mic")
        }
      },
      onResponderRelease: (evt) => {
        this.setState({
          opacity: "white",
          text: I18n.t('message.Chat.Voice.holdToTalk')
        });
        RecordView.hide();
        let canceled;
        if (evt.nativeEvent.locationY < 0 ||
          evt.nativeEvent.pageY < this.recordPageY) {
          canceled = true;
        } else {
          canceled = false;
        }
        this._cancel(canceled)
      },
      onResponderTerminationRequest: (evt) => true,
      onResponderTerminate: (evt) => {
      },
    }
  }
  setRecordView = (recordingText, recordingColor, icon) => {
    this.setState({
      recordingText: recordingText,
      recordingColor: recordingColor,
      icon: icon
    }, _ => RecordView.show(this.state.recordingText, this.state.recordingColor, this.state.icon));
  }

render() {
    const { opacity, text } = this.state
    return (
      <View style={styles.Box}>
        <View
          {...this.Gesture}        //注冊為手勢組件
          onLayout={this.handleLayout}
          ref={(record) => this.record = record}
          style={[styles.textBoxStyles, { backgroundColor: opacity }]}>
          <Text>{text}</Text>
        </View>
      </View>
    )
  }

上面彈出層的浮框?qū)崿F(xiàn)為

使用的是一個三方庫teaset
GitHub地址：https://github.com/rilyu/teaset

class RecordView {
  static key = null;
  static show(text, color, icon) {
    let showIcon;
    if (RecordView.key) RecordView.hide()
    if (color == 'red') {
      showIcon = (<Image source={ic_ch3x} style={styles.imageStyles} />)
    } else if (icon == 'short') {
      showIcon = (<Image source={SHORT4} style={styles.imageStyles} />)
    } else {
      showIcon = (
        <View>
          <Icon name={'ios-mic'} style={styles.IconStyles} />
          <Spinner size={24} type="ThreeBounce" color='white' />
        </View>
      );
    }

    RecordView.key = Toast.show({
      text: (
        <Text style={[styles.textStyles, { backgroundColor: color }]}>
          {text}
        </Text>
      ),
      icon: showIcon,
      position: 'center',
      duration: 1000000,
    });
  }
    static hide() {
        if (!RecordView.key) return;
        Toast.hide(RecordView.key);
        RecordView.key = null;
    }
}

我把代碼直接貼上吧直奋，沒單獨從項目中摘出來，就貼整個文件了

import React, { Component } from 'react';
import {
  Image, PermissionsAndroid, Alert,
  Platform, UIManager, findNodeHandle, DeviceEventEmitter
} from 'react-native';
import styles from './Styles';
import { Toast } from 'teaset';
import I18n from '../../../../I18n';
import { UpperDistance } from '../config';
import Spinner from "react-native-spinkit";
import { Text, Icon, View } from 'native-base'
import { AudioRecorder } from 'react-native-audio';
import Permissions from 'react-native-permissions';
import SHORT4 from '../../../../Images/C2CImg/SHORT4.png';
import ic_ch3x from '../../../../Images/C2CImg/ic_ch3x.png';
import MessageUtil from '../../MessageUtilModel/MessageUtil';
const maxTime = 45;  //最大時間
const minTime = 1; //最小時間
export default class Voice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      paused: false,
      recordingText: "",
      opacity: 'white',
      recordingColor: "transparent",
      text: I18n.t('message.Chat.Voice.holdToTalk'),
      currentTime: null,        //開始錄音到現(xiàn)在的持續(xù)時間
      recording: false,         //是否正在錄音
      stoppedRecording: false,  //是否停止了錄音
      finished: false,          //是否完成錄音
      hasPermission: undefined, //是否獲取權(quán)限
    }
    // 語音存儲路徑
    const { userId } = this.props.chatFriend || {}
    this.audioPath = MessageUtil.getFilePath(userId, `${(new Date()).getTime()}.aac`)
  }
  componentDidMount() {
    this._checkPermission()
    this.prepareRecordingPath(this.audioPath);
    AudioRecorder.onProgress = (data) => {
      this.setState({
        currentTime: Math.floor(data.currentTime)
      }, () => {
        if (this.state.currentTime >= maxTime) {
          Alert.alert(I18n.t('message.Chat.Voice.speakTooLong'))
          this._cancel(false)
        }
      });
    };
    AudioRecorder.onFinished = (data) => {
      // Android callback comes in the form of a promise instead.
      if (Platform.OS === 'ios') {
        this._finishRecording(data.status === "OK", data.audioFileURL);
      }
    };
    this.Gesture = {
      onStartShouldSetResponder: (evt) => true,
      onMoveShouldSetResponder: (evt) => true,
      onResponderGrant: (evt) => {
        if (!this.state.hasPermission) {
          Alert.alert(I18n.t('message.Chat.Voice.jurisdiction'))
        }
        this.setState({
          opacity: "#c9c9c9",
          recordingText: I18n.t('message.Chat.Voice.fingerStroke'),
          text: I18n.t('message.Chat.Voice.releaseEnd'),
          icon: "ios-mic",
          recordingColor: 'transparent'
        }, _ => RecordView.show(this.state.recordingText, this.state.recordingColor, this.state.icon));
        this._record();
      },
      onResponderMove: (evt) => {
        if (evt.nativeEvent.pageY < this.recordPageY - UpperDistance) {
          if (this.state.recordingColor != 'red') {
            this.setRecordView(I18n.t('message.Chat.Voice.loosenFingers'), 'red', "ios-mic-off")
          }
        } else if (this.state.recordingColor != 'transparent') {
          this.setRecordView(I18n.t('message.Chat.Voice.fingerStroke'), 'transparent', "ios-mic")
        }
      },
      onResponderRelease: (evt) => {
        this.setState({
          opacity: "white",
          text: I18n.t('message.Chat.Voice.holdToTalk')
        });
        RecordView.hide();
        let canceled;
        if (evt.nativeEvent.locationY < 0 ||
          evt.nativeEvent.pageY < this.recordPageY) {
          canceled = true;
        } else {
          canceled = false;
        }
        this._cancel(canceled)
      },
      onResponderTerminationRequest: (evt) => true
    }
    //chatChange type 1前臺 0后臺 2中間
    this.ShowLocation = DeviceEventEmitter.addListener('chatChange', (type) => {
      this._cancel(false)
    })
  }
  componentWillUnmount() {
    this.ShowLocation.remove()
    AudioRecorder.removeListeners()
    this.timer && clearTimeout(this.timer);
  }
  prepareRecordingPath = (audioPath) => {
    AudioRecorder.prepareRecordingAtPath(audioPath, {
      SampleRate: 22050,
      Channels: 1,
      AudioQuality: 'Low',
      AudioEncoding: 'aac',
      OutputFormat: 'aac_adts',
    });
  }
  _checkPermission = async () => {
    const rationale = {
      'title': I18n.t('message.Chat.Voice.tips'),
      'message': I18n.t('message.Chat.Voice.tipsMessage')
    };
    let askForGrant = false
    if (Platform.OS === 'ios') {
      Permissions.check('microphone', { type: 'always' }).then(res => {
        if (res == 'authorized') {
          this.setState({ hasPermission: true })
        } else {
          Permissions.request('microphone', { type: 'always' }).then(response => {
            if (response == 'denied') {
              askForGrant = true
            } else if (response == 'authorized') {
              this.setState({ hasPermission: true });
            }
          });
        }
      });
    } else {
      const status = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, rationale)
      if (status !== "granted") {
        askForGrant = true
      } else {
        this.setState({ hasPermission: true });
      }
    }
    if (askForGrant) {
      Alert.alert(
        'Can we access your microphone and Speech Recognition?',
        'We need access so you can record your voice',
        [
          {
            text: 'Later',
            onPress: () => console.log('Permission denied'),
            style: 'cancel',
          },
          {
            text: 'Open Settings',
            onPress: Permissions.openSettings
          },
        ],
      );
    }
  }
  setRecordView = (recordingText, recordingColor, icon) => {
    this.setState({
      recordingText: recordingText,
      recordingColor: recordingColor,
      icon: icon
    }, _ => RecordView.show(recordingText, recordingColor, icon));
  }

  _cancel = (canceled) => {
    let filePath = this._stop();
    if (canceled) return;
    if (this.state.currentTime < minTime) {
      this.setRecordView(I18n.t('message.Chat.Voice.speakTooShort'), 'transparent', "short")
      this.timer = setTimeout(() => { RecordView.hide() }, 300)
      return;
    }
    this.setState({ currentTime: null })
    let voice = {
      audioPath: this.audioPath,
      currentTime: this.state.currentTime
    }
    setTimeout(() => { this.props.SendVoice(voice) }, 500)
  }
  _pause = async () => {
    if (!this.state.recording) return;
    try {
      const filePath = await AudioRecorder.pauseRecording();
      this.setState({ paused: true });
    } catch (error) {
    }
  }

  _resume = async () => {
    if (!this.state.paused) return;
    try {
      await AudioRecorder.resumeRecording();
      this.setState({ paused: false });
    } catch (error) {
    }
  }

  _stop = async () => {
    if (!this.state.recording) return;

    this.setState({ stoppedRecording: true, recording: false, paused: false });

    try {
      const filePath = await AudioRecorder.stopRecording();

      if (Platform.OS === 'android') {
        this._finishRecording(true, filePath);
      }
      return filePath;
    } catch (error) {
    }
  }
  _finishRecording = (didSucceed, filePath) => {
    this.setState({ finished: didSucceed });
  }
  _record = async () => {
    const { recording, hasPermission, stoppedRecording } = this.state
    const { userId } = this.props.chatFriend || {}
    if (recording) return;
    if (!hasPermission) return;
    if (stoppedRecording) {
      this.audioPath = MessageUtil.getFilePath(userId, `${(new Date()).getTime()}.aac`)
      this.prepareRecordingPath(this.audioPath);
    }
    this.setState({
      recording: true,
      paused: false
    });

    try {
      const filePath = await AudioRecorder.startRecording();
    } catch (error) {
    }
  }
  handleLayout = () => {
    const handle = findNodeHandle(this.record);
    UIManager.measure(handle, (x, y, w, h, px, py) => {
      // this._ownMeasurements = { x, y, w, h, px, py };
      this.recordPageX = px;
      this.recordPageY = py;
    });
  }
  render() {
    const { opacity, text } = this.state
    return (
      <View style={styles.Box}>
        <View
          {...this.Gesture}
          onLayout={this.handleLayout}
          ref={(record) => this.record = record}
          style={[styles.textBoxStyles, { backgroundColor: opacity }]}>
          <Text>{text}</Text>
        </View>
      </View>
    )
  }
}
class RecordView {
  static key = null;
  static show(text, color, icon) {
    let showIcon;
    if (RecordView.key) RecordView.hide()
    if (color == 'red') {
      showIcon = (<Image source={ic_ch3x} style={styles.imageStyles} />)
    } else if (icon == 'short') {
      showIcon = (<Image source={SHORT4} style={styles.imageStyles} />)
    } else {
      showIcon = (
        <>
          <Icon name={'ios-mic'} style={styles.IconStyles} />
          <Spinner size={24} type="ThreeBounce" color='white' />
        </>
      );
    }

    RecordView.key = Toast.show({
      text: (
        <Text style={[styles.textStyles, { backgroundColor: color }]}>
          {text}
        </Text>
      ),
      icon: showIcon,
      position: 'center',
      duration: 1000000,
    });
  }
  static hide() {
    if (!RecordView.key) return;
    Toast.hide(RecordView.key);
    RecordView.key = null;
  }
}