I try to get duration from audio tag. My code get Audio file from server with axios, and it puts on audio tag. That code like that.
//Parents Component
const [sound, setSound] = useState({
url: "",
timestamp: {},
});
...
//Child get sound from Parents Component by props.
//That's worked well, and playing file worked well too.
{/* Playing sound Tag */}
<audio
ref={audioRef}
src={sound.url}
onLoadedData={loadedData}
onTimeUpdate={getCurrentDuration}
preload="metadata"
></audio>
and Problem in here.
//#region 진행 시간, 퍼센트 구하는 함수
const getCurrentDuration = (e) => {
if (e.currentTarget) {
const currentTime = e.currentTarget.currentTime;
/* Return current audio bar's length to seconds
-> This point occurs problem. Duration return to NaN
NaN occurs when there is no data, but when I checked it with the console
Even though it is executed after carrying sound, NaN occurs
*/
const duration = e.currentTarget.duration;
const percent = ((currentTime / duration) * 100).toFixed(2);
console.log(e.currentTarget)
setPercentage(+percent);
setCurrectTime(currentTime.toFixed(2));
}
};