I am trying to create an Animated.View inside which I want to show the progress of the audio being played, similar to seek.
The seek UI component
<View
style={{
width: 78,
height: 5,
backgroundColor: "#B2B2B2",
}}
>
<Animated.View
style={[styles.inner, { width: progress }]}
/>
</View>
The function clicking play function is as follows:
const listenaudio = (audio, id) => {
setResumeAudio(id);
if (playAudio != null) {
playAudio.release();
}
setsoundpause(id);
playAudio = new Sound(audio, Sound.MAIN_BUNDLE, (error) => {
var duration = playAudio.getDuration();
getCurrentPlaybackTime(playAudio, duration);
if (error) {
return;
}
console.log('duration:',duration)
console.log('progress value:',_progressValue)
_progressValue.addListener(({ value }) => {
// console.log({value:value})
setProgress(value*78);
});
Animated.timing(_progressValue, {
duration: duration * 1000,
toValue: 1,
// easing: Easing.linear,
useNativeDriver: false,
}).start(()=>setProgress(0));
// console.log('progress value',_progressValue)
playAudio.play((success) => {
if (success) {
setsoundpause(0);
}
});
});
playAudio.setVolume(1);
};
var interval;
const getCurrentPlaybackTime = (playAudio, duration) => {
// console.log('duration',duration)
interval = setInterval(() => {
playAudio.getCurrentTime((seconds) => {
if (seconds < duration) {
console.log('at',seconds)
}
else {
clearInterval(interval);
setResumeAudio(0);
}
});
}, 300);
};
However when I try running it, the _progressValue remains 1 and not updating intermittently, so the animation is not showing up properly. where have I gone wrong?