Merge pull request #300 from l3vels/fix/audio

fix: AudioPlayer duration

apps/ui/src/components/AudioPlayer/AudioPlayer.tsx

@@ -35,10 +35,10 @@ const AudioPlayer = ({
     if (progressBarRef.current === null) return
 
     setCurrentTime(audioRef.current.currentTime)
-    setDuration(audioRef.current.duration)
+    // setDuration(audioRef.current.duration)
 
     // Calculate the percentage of audio played
-    const percentage = (audioRef.current.currentTime / audioRef.current.duration) * 100
+    const percentage = (audioRef.current.currentTime / duration) * 100
     progressBarRef.current.style.background = `linear-gradient(to right, #D6EBFF ${percentage}%, transparent 0)`
 
     if (percentage === 100) {
@@ -63,15 +63,31 @@ const AudioPlayer = ({
   }
 
   useEffect(() => {
-    if (audioRef.current === null) return
-
-    audioRef.current.onloadedmetadata = () => {
-      if (audioRef.current === null) return
-
-      setDuration(audioRef.current.duration)
-    }
+    getDuration(audioUrl, function (duration: number) {
+      setDuration(duration)
+    })
   }, [])
 
+  const getDuration = function (url: string, next: any) {
+    const _player = new Audio(url)
+    _player.addEventListener(
+      'durationchange',
+      function (e) {
+        if (this.duration != Infinity) {
+          const duration = this.duration
+          _player.remove()
+          next(duration)
+        }
+      },
+      false,
+    )
+    _player.load()
+    _player.currentTime = 24 * 60 * 60 //fake big time
+    _player.volume = 0
+    _player.play()
+    //waiting...
+  }
+
   return (
     <StyledRoot hasClose={onCloseClick ? true : false}>
       <StyledButton onClick={togglePlay} className='play-pause-button' type='button'>