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

Question

导入*作为进度从反应本地进度；导入{字体家族，字体}从...常量；

从“react native”导入{图像、SafeAreaView、样式表、文本、TouchableOpacity、视图}；

从“React”导入React，{Component}；

从“react native responsive screen”导入{heightPercentageToDP作为hp，widthPercentageToDP作为wp}；

导入AudioRecorderPlayer从反应本地音频录音机播放器；

导入颜色从'.../.../通用/GColors'；

从'导入GColors.../.../通用/GColors'；

从“react native keep awake”导入KeepAwake；

从“反应本机音频波形”导入波形；

从“../../assets/images/index”导入图像；

从.../.../通用/GFunction'；

导出默认类ConfirmRecording扩展组件{

构造函数

超级（）；

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

}

显示进步 = () =

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;
  });
}

};

= () =

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
});

}

渲染（）{

return (
  <SafeAreaView style={style.mainContainer}>
    <View style={style.audhtml" target="_blank">ioView}>
      <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>
)

} }

样式heet.create

主容器：{

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

}，第二个WaveView：{

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

}，第二个音频视图：{

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

}，波形：{

height: 25,
flex: 1,

}，图标：{

玛吉宁：可湿性粉剂（5）

}，audioView：{

背景颜色： Colors.white，高度："25%"，宽度："88%"，对齐自我："中心"，边界半径： hp（2），

}，audioViewText:{

textAlign:'center'，marginTop:hp（2），fontSize:Fonts.fontsize20，marginHorizontal:wp（6），fontfamine:fontfamine.medium，

颜色： Colors.text咖啡颜色

}）

Answer 1

问题出现在回声的波形中...两者同时播放，所以这就是问题产生的原因...