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