simple audio player

src/components/node/Comment/index.tsx

@@ -54,7 +54,14 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
       {groupped.audio && (
         <div className={styles.audios}>
           {groupped.audio.map(file => (
-            <div key={file.id} onClick={() => Player.setSrc(getURL(file.url))}>
+            <div
+              key={file.id}
+              onClick={() => {
+                Player.set(getURL(file.url));
+                Player.load();
+                Player.play();
+              }}
+            >
               {file.name}
             </div>
           ))}

src/utils/player.ts

@@ -1,10 +1,55 @@
-import { Howl } from 'howler';
+// import { Howl } from 'howler';
+// import { store } from '~/redux/store';
 
-Howl.prototype.setSrc = function setSrc(src) {
-  this.unload();
-  this._src = src;
-  this.load();
-  this.play();
-};
+// export const Player: HTMLAudioElement = new Audio();
+//
+// console.log(Player);
 
-export const Player = new Howl({ src: [''] });
+export class PlayerClass {
+  public constructor() {
+    this.element.addEventListener('timeupdate', () => {
+      const { duration: total, currentTime: current } = this.element;
+      const progress = (current / total) * 100;
+
+      this.element.dispatchEvent(
+        new CustomEvent('playprogress', {
+          detail: { current, total, progress },
+        })
+      );
+    });
+  }
+
+  public element: HTMLAudioElement = new Audio();
+
+  public duration: number = 0;
+
+  public set = (src: string): void => {
+    this.element.src = src;
+  };
+
+  public on = (type: string, callback) => {
+    this.element.addEventListener(type, callback);
+  };
+
+  public off = (type: string, callback) => {
+    this.element.removeEventListener(type, callback);
+  };
+
+  public load = () => {
+    this.element.load();
+  };
+
+  public play = () => {
+    this.element.play();
+  };
+
+  public getDuration = () => {
+    return this.element.currentTime;
+  };
+}
+
+const Player = new PlayerClass();
+
+Player.element.addEventListener('playprogress', ({ detail }: CustomEvent) => console.log(detail));
+
+export { Player };