From d6ebbfd67db7fa0532580c98f9f3841b45c7175a Mon Sep 17 00:00:00 2001
From: ljx0517 <ljx0517@gmail.com>
Date: Sat, 15 Aug 2020 20:01:06 +0800
Subject: [PATCH] feat: add audio record

---
 angular.json                                  |  6 +-
 .../audio-recorder.component.ts               | 73 ++++++++++++++++++-
 src/assets/libs/audio-recorder/worker.js      |  7 +-
 3 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/angular.json b/angular.json
index c46936b..358eab8 100644
--- a/angular.json
+++ b/angular.json
@@ -35,7 +35,11 @@
               "./node_modules/animate.css/animate.min.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "src/assets/libs/audio-recorder/lame.min.js",
+              "src/assets/libs/audio-recorder/worker.js",
+              "src/assets/libs/audio-recorder/recorder.js"
+            ]
           },
           "configurations": {
             "production": {
diff --git a/src/app/common/audio-recorder/audio-recorder.component.ts b/src/app/common/audio-recorder/audio-recorder.component.ts
index 605db0a..589cc21 100644
--- a/src/app/common/audio-recorder/audio-recorder.component.ts
+++ b/src/app/common/audio-recorder/audio-recorder.component.ts
@@ -54,7 +54,10 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
   audioBlob: any;
 
 
-  constructor( private nzMessageService: NzMessageService ) {
+  constructor( private nzMessageService: NzMessageService,
+               private zone: NgZone,
+               private nzNotificationService: NzNotificationService,
+               private httpClient: HttpClient) {
     this.uploadUrl = (<any> window).courseware.uploadUrl();
     this.uploadData = (<any> window).courseware.uploadData();
 
@@ -62,6 +65,18 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
       this.uploadUrl = url;
       this.uploadData = data;
     };
+    this.recorder = new Recorder({
+      sampleRate: 44100, // 采样频率,默认为44100Hz(标准MP3采样率)
+      bitRate: 128, // 比特率,默认为128kbps(标准MP3质量)
+      success: () => { // 成功回调函数
+      },
+      error: (msg) => { // 失败回调函数
+        this.nzNotificationService.error('Init Audio Recorder Failed', msg, {nzDuration: 0});
+      },
+      fix: (msg) => { // 不支持H5录音回调函数
+        this.nzNotificationService.error('Init Audio Recorder Failed', msg, {nzDuration: 0});
+      }
+    });
   }
 
   init() {
@@ -99,9 +114,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
     this.audio.pause();
     this.isPlaying = false;
     this.audio.remove();
-    // if (this.recorder.worker) {
-    //   this.recorder.worker.terminate();
-    // }
+    if (this.recorder.worker) {
+      this.recorder.worker.terminate();
+    }
   }
 
   progressText(percent) {
@@ -145,10 +160,60 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
 
   // 开始录音
   onBtnRecord = () => {
+    if (!this.isRecording) {
+      this.isRecording = true;
+      this.recorder.start();
+    } else {
+      this.isRecording = false;
+      this.recorder.stop();
+      this.recorder.getBlob((blob) => {
+        this.audio.src = URL.createObjectURL(blob);
+        this.audioBlob = blob;
+        this.isUploading = true;
+        const formData = new FormData();
+        formData.append('file', blob, 'courseware-item-record.mp3');
+        const req = new HttpRequest('POST', this.uploadUrl, formData, {
+          reportProgress: true
+        });
+
+        this.httpClient.request(req)
+          .subscribe((event: HttpEvent<any>) => {
+            switch (event.type) {
+              case HttpEventType.UploadProgress:
+                this.zone.run(() => {
+                  this.progress = Math.floor(100 * event.loaded / event.total);
+                });
+                break;
+              case HttpEventType.Response:
+                this.zone.run(() => {
+                  console.log(event);
+                  this.audioUploaded.emit(event.body);
+                  this.isUploading = false;
+                });
+                break;
+            }
+          }, (error) => {
+            console.error(error);
+            this.isUploading = false;
+          });
+      });
+    }
   }
 
   // 切换模式
   onBtnSwitchType() {
+    if (this.isUploading) {
+      this.nzMessageService.warning('In Uploading');
+      return;
+    } else if (this.isRecording) {
+      this.nzMessageService.warning('In Recording');
+      return;
+    }
+    if (this.type === Type.RECORD) {
+      this.type = Type.UPLOAD;
+    } else {
+      this.type = Type.RECORD;
+    }
   }
   onBtnClearAudio() {
     this.audioUrl = null;
diff --git a/src/assets/libs/audio-recorder/worker.js b/src/assets/libs/audio-recorder/worker.js
index 41e7c93..f6c2dd5 100755
--- a/src/assets/libs/audio-recorder/worker.js
+++ b/src/assets/libs/audio-recorder/worker.js
@@ -1,6 +1,7 @@
 (function () {
   'use strict';
-  if (!importScripts) {
+  if (!self.importScripts) {
+    return
     var importScripts = (function (globalEval) {
       var xhr = new XMLHttpRequest;
       return function importScripts() {
@@ -36,8 +37,8 @@
   }
 
 
-  importScripts('assets/libs/audio-recorder/lame.min.js');
-
+  // importScripts('assets/libs/audio-recorder/lame.min.js');
+  self.importScripts('lame.min.js');
   var mp3Encoder, maxSamples = 1152, samplesMono, lame, config, dataBuffer;
 
   var clearBuffer = function () {
-- 
2.21.0