想要显示使用 react-native-audio-recorder-player 录制的音频的秒数

Question

我试图显示开始录制时的秒数，但在开始录制后我正在更新 state 但这在单击停止按钮后不起作用 state 也被更新 ZC1C425268E68385D1AB5074C17A9 正在停止录制但没有停止。

我尝试了所有可能的事情，但没有任何帮助。 这是我的代码

import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const [rectime, setrectime] = useState(0)

export default function ChatScreen({ navigation, user, route }) {

const audioRecorderPlayer = new AudioRecorderPlayer();
const dirs = RNFetchBlob.fs.dirs;
const path = Platform.select({
      ios: 'hello.m4a',
      android: `${dirs.CacheDir}/hello.mp3`,
});

const onStartRecord = async () => {

await audioRecorderPlayer.startRecorder(path);
audioRecorderPlayer.addRecordBackListener(e => {
  console.log('Recording . . . ', e);
   setrectime(e.currentPosition / 1000)
});

};


const onStopRecord = async () => {

const audio = await audioRecorderPlayer.stopRecorder().then(() => {
 
})

   return (() => {
   alert('stop')
   audioRecorderPlayer.removeRecordBackListener()
   setrectime(0)
   })
   sendmp3(path)

   };

   return(
      <View style={[styles.footer]}>
      
      <TouchableOpacity activeOpacity={0.5} onPress={() => onStartRecord()} style= 
           {styles.btnSendd}>
        <Ionicons name={'mic-circle-outline'} size={24} color={'#000'} />
      </TouchableOpacity>
      
      <TouchableOpacity activeOpacity={0.5} onPress={() => onStopRecord()} style= 
        {styles.btnSendd}>
        <Ionicons name={'mic-circle-outline'} size={24} color={'#efc100'} />
      </TouchableOpacity>

      {
        rectime > 0
          ?
          <View style={styles.rectime}>
            <Text style={{ fontSize: 15 }}>{rectime.toFixed(0)}</Text>
          </View>
          :
          <>
            <TouchableOpacity activeOpacity={0.5} onPress={handleVideoPicker} style= 
             {styles.btnSendd}>
              <Ionicons name={'videocam-outline'} size={24} color={'black'} />
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnSendd} activeOpacity={0.5} onPress= 
             {handlePhotoPicker}>
              <Ionicons name={'camera-outline'} size={24} color={'black'} />
            </TouchableOpacity>
          </>
      }

   )

   }

Answer 1

请尝试在 function 组件之外定义您的 audioRecorderPlayer object 创建。 喜欢

const audioRecorderPlayer = new AudioRecorderPlayer();
export default function ChatScreen({ navigation, user, route }) {

}