如何停止 iOS 端的回声反应原生录音播放器？

Question

在播放语音剪辑的代码下方，我从上一个屏幕发送到此处

import * as Progress from 'react-native-progress';
import { FontFamily, Fonts } from '../../common/GConstants';
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React, { Component } from 'react';
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
import Colors from '../../common/GColors';
import GColors from '../../common/GColors';
import KeepAwake from 'react-native-keep-awake';
import WaveForm from 'react-native-audiowaveform';
import images from '../../assets/images/index';
import { secondsToTime } from '../../common/GFunction';

export default class ConfirmRecording extends Component {

  constructor() {
  
  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>
    )

  }
}

const style = 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,

  },
  icon:
  {
  
 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,
  
  color: Colors.textCoffeeColor

  },

})

Answer 1

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