react-native - stopRecorder() 不起作用 - react-native-audio-recorder-player

Question

我正在尝试使用包 react-native-audio-recorder-player 在 React Native 应用程序中录制音频。录音开始成功，但在调用 stopRecorder() 后仍继续录音。

尝试了来自 gitHub 的多种解决方案，但没有任何帮助。这是我的代码

import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

export const Recorder = () => {
 const audioRecorderPlayer = new AudioRecorderPlayer();

 const onStartRecord = async () => {
  await audioRecorderPlayer.startRecorder();
  audioRecorderPlayer.addRecordBackListener(e => {
    console.log('Recording . . . ', e.current_position);
     return;
    });
  };

 const onStopRecord = async () => {
  const audio = await audioRecorderPlayer.stopRecorder();
  audioRecorderPlayer.removeRecordBackListener();
  };

 return (
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
   <TouchableOpacity onPress={onStartRecord}>
     <Text>Start</Text>
   </TouchableOpacity>

   <TouchableOpacity onPress={onStopRecord}>
     <Text>Stop</Text>
   </TouchableOpacity>
  </View>
 );
};

即使按下停止后，控制台仍然在进行 Recording 。 . .，下面是我的控制台。

Answer 1

为了这个工作，需要在组件外添加const audioRecorderPlayer = new AudioRecorderPlayer();。因此，组件将如下所示。

import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const audioRecorderPlayer = new AudioRecorderPlayer();

export const Recorder = () => {
 const onStartRecord = async () => {
  await audioRecorderPlayer.startRecorder();
  audioRecorderPlayer.addRecordBackListener(e => {
    console.log('Recording . . . ', e.current_position);
     return;
    });
  };

 const onStopRecord = async () => {
  const audio = await audioRecorderPlayer.stopRecorder();
  audioRecorderPlayer.removeRecordBackListener();
  };

 return (
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
   <TouchableOpacity onPress={onStartRecord}>
     <Text>Start</Text>
   </TouchableOpacity>

   <TouchableOpacity onPress={onStopRecord}>
     <Text>Stop</Text>
   </TouchableOpacity>
  </View>
 );
};

进行此更改后，我的 stopRecorder 工作正常。