Added new audio controler on chat

src/app/shared/chat/messages/messages.page.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, ModalController, PopoverController } from '@ionic/angular';
+import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -32,6 +32,8 @@ import { File } from '@awesome-cordova-plugins/file/ngx';
 import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
 import { SessionStore } from 'src/app/store/session.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { Howl } from 'howler';
+import { runInThisContext } from 'vm';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -90,6 +92,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
   sessionStore = SessionStore
+  audioPlay: Howl = null;
+  isPlaying = false;
+  audioProgress = 0;
+  audioDuration = 0;
+  audioTimer:any;
+  @ViewChild('range', {static: false}) range: IonRange;
 
   constructor(
     public popoverController: PopoverController,
@@ -1061,6 +1069,54 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     // msg.receptorReceive()
     // alert('cool!')
   }
+
+  start(track) {
+    if(this.audioPlay){
+      this.audioPlay.stop();
+    }
+    this.audioPlay = new Howl({
+      src: [track.changingThisBreaksApplicationSecurity],
+      onplay: () => {
+        console.log('audio play')
+        this.isPlaying = true;
+        this.updateProgress()
+      },
+      onend: () => {
+        console.log('audio end')
+        this.isPlaying = false;
+        clearTimeout(this.audioTimer)
+        this.audioProgress = 0
+        
+      },
+    })
+    this.audioPlay.play();
+  }
+
+  togglePlayer(pause) {
+    this.isPlaying = !pause;
+    if(pause) {
+      this.audioPlay.pause();
+    } else {
+      this.audioPlay.play();
+    }
+  } 
+
+  seek() {
+    let newValue = +this.range.value;
+    let duration = this.audioPlay.duration();
+    this.audioPlay.seek(duration * (newValue / 100));
+  }
+
+  updateProgress() {
+    let seek = this.audioPlay.seek();
+    this.audioProgress = (seek / this.audioPlay.duration()) * 100 || 0;
+    console.log(this.audioDuration)
+    this.audioTimer = setTimeout(() => {
+      this.updateProgress()
+    },1000)
+  }
+
+
 }