Player not working Smoothly and hangs the screen

[bhargav-trt]

When call startPlayer function my app UI is hang. till audio play or any result return

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}}>
Play

<TouchableOpacity onPress={() => handlePlayingState()} style={{padding:10,margin:10, backgroundColor:'#D3D3D3',width:80}}>
{isPause ? 'Resume' :'Pause'}

{isLoader ? 'Loading' : progress}

);
}
`

Screen.Recording.2024-02-26.at.10.45.43.PM.mov