Handle webm infinity duration (#8)

* Handle webm infinity duration

* Update package version

Author: samhirtarif

README.md

@@ -1,5 +1,5 @@
 # **react-audio-player-component**
-A audio player for React with a modern look and convenient usage
+A mobile-friendly audio player for React with a modern look and convenient usage.
 
 ## Installation
 ```sh

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-audio-player-component",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "",
   "repository": {

package.json

@@ -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);

public/audios/audio.webm

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