想要显示使用react原生录音机播放器录制的音频的秒数

Question

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

我尽了一切可能，但无济于事。这是我的代码

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

请尝试在函数组件之外定义您的audioRecorderPlayer对象创建。像

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

Answer 2

而不是在外部创建。您也可以在组件中创建一个引用，如下所示：

const audioRecorder = useRef(new AudioRecorderPlayer()).current;