在iOS side react本机录音播放器中停止回声？下面是我从上一个屏幕发送到这里的播放语音剪辑的代码

Question

从‘react-native- Progress’导入* as progress；从‘../../common/GConstants’导入{ FontFamily，Fonts }；

从‘react-native’导入{图片，SafeAreaView，StyleSheet，文本，TouchableOpacity，视图}；

从‘react’导入React，{ Component }；

从‘react- heightPercentageToDP -responsive screen’导入{ widthPercentageToDP as hp，react as wp }；

从‘react-native- AudioRecorderPlayer -recorder-player’导入音频；

从‘../../common/GColors’导入颜色；

从‘../../ GColors /GColors’导入通用；

从‘react- KeepAwake -keep-KeepAwake’导入react；

从‘react-native-audiowaveform’导入WaveForm；

从‘../../assets/ images /index’导入镜像；

从‘../../common/GFunction’导入{ secondsToTime }；

导出默认类ConfirmRecording扩展了组件{

构造函数(){

super()；

this.state = {
  recordTime: '',
  duration: '',
  isPlaying: false,
  totalDuration: '',
 audioPath: '',
  currentPositionSec: '',
  currentDurationSec: '',
};
this.audioRecorderPlayer = new AudioRecorderPlayer();

}

showProgress = () => {

if (this.state.currentPositionSec / this.state.totalDuration > 1) {
  return Math.round(
    this.state.currentPositionSec / this.state.totalDuration,
  );
} else {
  return Math.fround(
    this.state.currentPositionSec / this.state.totalDuration,
  );
}

}；

onStartPlay = async () => {

console.log('START   and is playing', this.state.audioPath + "--------" + this.state.isPlaying);
if (this.state.isPlaying) {
  this.setState({ isPlaying: false });
  this.audioRecorderPlayer.stopPlayer();
  this.audioRecorderPlayer.removePlayBackListener();

} else {
  const msg = await this.audioRecorderPlayer.startPlayer(
    this.state.audioPath,
    // 'http://podcasts.cnn.net/cnn/services/podcasting/specials/audio/2007/05/milesobrien.mp3',
  );
  console.log('Play MSG', msg);
  this.audioRecorderPlayer.addPlayBackListener((e) => {
    this.setState({
      isPlaying: true,
      currentPositionSec: Math.round(
        Math.round(Math.round(e.current_position / 10) / 100),
      ),
      currentDurationSec: Math.round(Math.round(e.duration / 10) / 100),
      playTime: e.current_position,

      duration: e.duration,
    });

    if (e.duration == e.current_position) {
      this.setState({ isPlaying: false });
      console.log('Stopped');
      this.audioRecorderPlayer.stopPlayer();
      this.audioRecorderPlayer.removePlayBackListener();
    }
    return;
  });
}

}；

componentDidMount = () => {

var audioPath = this.props.navigation.getParam('audioPath');
var duration = this.props.navigation.getParam('duration');
console.warn("Data from prevciouyas screen", audioPath + "--------" + duration)
this.setState({
  audioPath: audioPath,
  duration: duration
});

}

componentWillUnmount = () => {

this.audioRecorderPlayer.stopPlayer();
this.audioRecorderPlayer.removePlayBackListener();
this.setState({
  audioPath: '',
  isPlaying: false
});

}

render() {

return (
  <SafeAreaView style={style.mainContainer}>
    <View style={style.audioView}>
      <Text style={style.audioViewText}>Confirm Recording</Text>
      <View style={{ marginTop: hp(2) }}>
        <View style={style.secondWaveView}>

          <WaveForm
            style={style.WaveForm}


            source={{ uri: this.state.audioPath }} // not work

            stop={this.state.isPlaying}

            play={this.state.isPlaying}

            // autoPlay={true}

            waveFormStyle={{ waveColor: Colors.gray, scrubColor: Colors.darkBlue }}

          />

          <Text> {secondsToTime(this.state.currentPositionSec)
            .m.toString()
            .padStart(2, 0) +
            ':' +
            secondsToTime(this.state.currentPositionSec)
              .s.toString()
              .padStart(2, 0)}</Text>
        </View>
        <View style={style.secondAudioView}>
          <TouchableOpacity

            onPress={(event) => {
              this.audioRecorderPlayer.stopPlayer();
              this.audioRecorderPlayer.removePlayBackListener();
              this.setState({ audioPath: '', isPlaying: false }, () => {
                // add Imerssion
                // this.props.navigation.state.params.a(true),
                this.props.navigation.navigate('ImpressionPro')
              });


            }
            }

            activeOpacity={.9}>
            <Image source={images.sendIcon} />
          </TouchableOpacity>
          <View style={{ flex: 1 }} />
          <TouchableOpacity style={style.icon}
            onPress={() => {
              this.audioRecorderPlayer.stopPlayer();
              this.audioRecorderPlayer.removePlayBackListener();
              this.setState({ audioPath: '', isPlaying: false }, () => {
                this.props.navigation.pop(2)

              });

            }}
            activeOpacity={.9}>
            <Image source={images.deleteCancelBtn} />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.onStartPlay()
                .then(() => {
                  console.log('Playing');
                })
                .catch((err) => {
                  console.log('PErr', err);
                });
            }}
            style={style.icon} activeOpacity={.9}>
            <Image source={images.playBtn} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
    <KeepAwake />
  </SafeAreaView>
)

}}

常量样式= StyleSheet.create({

mainContainer：{

flex: 1,
backgroundColor: Colors.darkBlue,
justifyContent: 'center',
alignItems: 'center'

}，secondWaveView：{

marginTop: hp(2),
marginHorizontal: wp(5.5),
flexDirection: 'row',
justifyContent: 'space-between',

}，secondAudioView：{

flexDirection: 'row',
marginTop: hp(2),
marginStart: wp(5)

}，WaveForm：{

height: 25,
flex: 1,

}，图标：{

marginEnd: wp(5)

}，audioView：{

backgroundColor: Colors.white，height："25%"，width："88%"，alignSelf：'center'，borderRadius: hp(2)，

}，audioViewText：{

textAlign：'center'，marginTop: hp(2)，fontSize: Fonts.fontsize20，marginHorizontal: wp(6)，fontFamily: FontFamily.medium，

颜色: Colors.textCoffeeColor

},

})

Answer 1

问题出在回声的波形中...两者都在玩同一时间，所以这就是问题产生的原因。