Open bhargav-trt opened 4 months ago
When call startPlayer function my app UI is hang. till audio play or any result return
3.6.6
0.72.5
android
an audio player should work smoothly.
hang UI screen till startPlayer function return any result.
audioPlayer.tsx ` import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const player = new AudioRecorderPlayer(); var listener: any = null; var errorListener: any = null; class AudioPlayer { onStartPlayer = async (path: any) => { try { this.onStopPlayer(); await player.startPlayer(path || ''); player.addPlayBackListener(e => { let position = Math.max(0,Math.floor(e.currentPosition / 1000)); let totalDuration = Math.floor(e.duration / 1000); if (listener) { if (position === totalDuration) { listener(position, false); setTimeout(() => { listener(0,false) }, 500); } else { listener(position, true); } } }); } catch (e) { console.error("AudioPlayer -> onStartPlayer >> ",e); if (errorListener) { errorListener(e); } } };
onStopPlayer = async () => { if (listener) { listener(0, false); } player.stopPlayer(); player.removePlayBackListener(); };
setAudioPlayerListener(listenerRef: any) { if (listener) { listener(0, false); } listener = listenerRef; }
setErrorListener(listenerRef:any){ errorListener = listenerRef; } onPausePlayer = async () => { player.pausePlayer(); }
onResumePlayer = async () => { player.resumePlayer(); } } const audioPlayer = new AudioPlayer(); export default audioPlayer; voiceMessage.tsx import React from "react"; import { useEffect, useState } from "react"; import { View, Text, TouchableOpacity } from 'react-native'; import audioPlayer from './audioPlayer';
voiceMessage.tsx
export function VoiceMessage() { const [progress, setProgress] = useState(0); const [isLoader, setLoader] = useState(false); const [isPause, setIsPause] = useState(false); const duration = 100; // this test duration set temporary
useEffect(() => { return () => { audioPlayer.onStopPlayer(); }; }, []);
const handlePlayingState = async () => { if (isPause) { await audioPlayer.onResumePlayer(); setIsPause(false); } else if (progress > 0 && progress < duration) { await audioPlayer.onPausePlayer(); setIsPause(true); } else { await audioPlayer.onStopPlayer(); setIsPause(false); } };
const handleAudioError = () => { setLoader(false) }
const setupAudioPlayer = async () => { setLoader(true); audioPlayer.setErrorListener(handleAudioError); await audioPlayer.onStartPlayer("https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp4"); setIsPause(false); audioPlayer.setAudioPlayerListener((value: any, isPlay: boolean) => { setProgress(value); setLoader(false); }); };
return ( <View style={{flex: 1,alignItems:'center',justifyContent:'center',flexDirection:'row'}}> <TouchableOpacity onPress={() => setupAudioPlayer()} style={{padding:10,backgroundColor:'#D3D3D3',width:80}}>
</TouchableOpacity> <TouchableOpacity onPress={() => handlePlayingState()} style={{padding:10,margin:10, backgroundColor:'#D3D3D3',width:80}}> <Text>{isPause ? 'Resume' :'Pause'}</Text> </TouchableOpacity> <Text> {isLoader ? 'Loading' : progress}</Text> </View>
); } `
https://github.com/hyochan/react-native-audio-recorder-player/assets/124132857/327e606a-25f2-4475-b844-a1a11ecebeb3
Version of react-native-audio-recorder-player
3.6.6
Version of React Native
0.72.5
Platforms you faced the error (IOS or Android or both?)
android
Expected behavior
an audio player should work smoothly.
Actual behavior
hang UI screen till startPlayer function return any result.
Code
audioPlayer.tsx ` import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const player = new AudioRecorderPlayer(); var listener: any = null; var errorListener: any = null; class AudioPlayer { onStartPlayer = async (path: any) => { try { this.onStopPlayer(); await player.startPlayer(path || ''); player.addPlayBackListener(e => { let position = Math.max(0,Math.floor(e.currentPosition / 1000)); let totalDuration = Math.floor(e.duration / 1000); if (listener) { if (position === totalDuration) { listener(position, false); setTimeout(() => { listener(0,false) }, 500); } else { listener(position, true); } } }); } catch (e) { console.error("AudioPlayer -> onStartPlayer >> ",e); if (errorListener) { errorListener(e); } } };
onStopPlayer = async () => { if (listener) { listener(0, false); } player.stopPlayer(); player.removePlayBackListener(); };
setAudioPlayerListener(listenerRef: any) { if (listener) { listener(0, false); } listener = listenerRef; }
setErrorListener(listenerRef:any){ errorListener = listenerRef; } onPausePlayer = async () => { player.pausePlayer(); }
onResumePlayer = async () => { player.resumePlayer(); } } const audioPlayer = new AudioPlayer(); export default audioPlayer;
voiceMessage.tsx
import React from "react"; import { useEffect, useState } from "react"; import { View, Text, TouchableOpacity } from 'react-native'; import audioPlayer from './audioPlayer';export function VoiceMessage() { const [progress, setProgress] = useState(0);
const [isLoader, setLoader] = useState(false);
const [isPause, setIsPause] = useState(false);
const duration = 100; // this test duration set temporary
useEffect(() => { return () => { audioPlayer.onStopPlayer(); }; }, []);
const handlePlayingState = async () => { if (isPause) { await audioPlayer.onResumePlayer(); setIsPause(false); } else if (progress > 0 && progress < duration) { await audioPlayer.onPausePlayer(); setIsPause(true); } else { await audioPlayer.onStopPlayer(); setIsPause(false); } };
const handleAudioError = () => { setLoader(false) }
const setupAudioPlayer = async () => { setLoader(true); audioPlayer.setErrorListener(handleAudioError); await audioPlayer.onStartPlayer("https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp4"); setIsPause(false); audioPlayer.setAudioPlayerListener((value: any, isPlay: boolean) => { setProgress(value); setLoader(false); }); };
return ( <View style={{flex: 1,alignItems:'center',justifyContent:'center',flexDirection:'row'}}> <TouchableOpacity onPress={() => setupAudioPlayer()} style={{padding:10,backgroundColor:'#D3D3D3',width:80}}>
); } `
https://github.com/hyochan/react-native-audio-recorder-player/assets/124132857/327e606a-25f2-4475-b844-a1a11ecebeb3