simple audio player

.eslintrc.js

@@ -84,5 +84,7 @@ module.exports = {
     HTMLDivElement: false,
     FormData: false,
     FileReader: false,
+    Audio: false,
+    CustomEvent: false,
   },
 };

package-lock.json

@@ -963,6 +963,12 @@
       "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==",
       "dev": true
     },
+    "@types/howler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.1.1.tgz",
+      "integrity": "sha512-YLwc9L853r85WqZk4xCiROGGodmlAYlKb0rQWABt4opLd6QHn2QLXIApa6vRNqjZxkzbiPs6eZskaRGOw5fDAA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",

package.json

@@ -17,6 +17,7 @@
     "@babel/cli": "^7.6.3",
     "@babel/preset-env": "^7.6.3",
     "@babel/types": "7.5.5",
+    "@types/howler": "^2.1.1",
     "@types/react-router": "^5.0.3",
     "autoresponsive-react": "^1.1.31",
     "awesome-typescript-loader": "^5.2.1",

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) {
+// export const Player: HTMLAudioElement = new Audio();
-  this.unload();
+//
-  this._src = src;
+// console.log(Player);
-  this.load();
-  this.play();
-};
 
-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 };