Handle webm infinity duration

samhirtarif · Jul 6, 2023 · a79284b · a79284b
1 parent bd4945d
commit a79284b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/public/audios/audio.webm b/public/audios/audio.webm
diff --git a/src/components/AudioPlayer.tsx b/src/components/AudioPlayer.tsx
@@ -238,6 +238,8 @@ const AudioPlayer: React.FC<
         audio.ontimeupdate = ontimeupdate;
         audio.onvolumechange = onvolumechange;
         audio.onwaiting = onwaiting;
+
+        audio.addEventListener("ended", onAudioEnded);
         setBlob(blob);
         return blob;
       })
@@ -248,8 +250,18 @@ const AudioPlayer: React.FC<
           setDuration(buffer.duration);
         });
       });
+
+    return () => {
+      // clean up
+      audio.removeEventListener("ended", onAudioEnded);
+    };
   }, []);
 
+  const onAudioEnded = (): void => {
+    setIsPlaying(false);
+    setAudioTime(0);
+  };
+
   const playAudio = (): void => {
     if (!audio.src) return;
     if (audio.duration !== Infinity) setDuration(audio.duration);

diff --git a/src/main.tsx b/src/main.tsx
@@ -5,7 +5,7 @@ import { AudioPlayer } from "./components/AudioPlayer";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <AudioPlayer 
-      src="audios/test.mp3"
+      src="audios/audio.webm"
       minimal={false}
       width={350}
       trackHeight={75}
@@ -20,7 +20,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
       skipDuration={2}
       showLoopOption={true}
       showVolumeControl={true}
-
+      onended={() => console.log("ENDED")}
       // seekBarColor="purple"
       // volumeControlColor="blue"
       // hideSeekBar={true}