simple audio player

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