Commit e3ae9caf authored by liujiaxin's avatar liujiaxin

feat: add audio record

parent 0fa20c07
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core'; import {ApplicationRef, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, NgZone, OnChanges} from '@angular/core';
import {NzMessageService, NzNotificationService, UploadFile} from 'ng-zorro-antd'; import {NzMessageService, NzNotificationService, UploadFile} from 'ng-zorro-antd';
import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http'; import {HttpClient, HttpEvent, HttpEventType, HttpRequest} from '@angular/common/http';
import {environment} from '../../../environments/environment'; import {environment} from '../../../environments/environment';
...@@ -57,6 +57,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -57,6 +57,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
constructor( private nzMessageService: NzMessageService, constructor( private nzMessageService: NzMessageService,
private zone: NgZone, private zone: NgZone,
private nzNotificationService: NzNotificationService, private nzNotificationService: NzNotificationService,
private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef,
private httpClient: HttpClient) { private httpClient: HttpClient) {
this.uploadUrl = (<any> window).courseware.uploadUrl(); this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData(); this.uploadData = (<any> window).courseware.uploadData();
...@@ -127,12 +129,19 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -127,12 +129,19 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
console.log('play'); console.log('play');
this.playIcon = 'pause'; this.playIcon = 'pause';
this.isPlaying = true; this.isPlaying = true;
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
onPause() { onPause() {
console.log('pause'); console.log('pause');
this.playIcon = 'play'; this.playIcon = 'play';
this.isPlaying = false; this.isPlaying = false;
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
onEnded() { onEnded() {
...@@ -140,10 +149,16 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -140,10 +149,16 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.playIcon = 'play'; this.playIcon = 'play';
this.percent = 0; this.percent = 0;
this.isPlaying = false; this.isPlaying = false;
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
onTimeUpdate(event) { onTimeUpdate(event) {
this.percent = Math.floor((this.audio.currentTime / this.audio.duration) * 100); this.percent = Math.floor((this.audio.currentTime / this.audio.duration) * 100);
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
onBtnPlay() { onBtnPlay() {
...@@ -156,6 +171,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -156,6 +171,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
} else { } else {
this.audio.play(); this.audio.play();
} }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
// 开始录音 // 开始录音
...@@ -182,6 +200,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -182,6 +200,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
case HttpEventType.UploadProgress: case HttpEventType.UploadProgress:
this.zone.run(() => { this.zone.run(() => {
this.progress = Math.floor(100 * event.loaded / event.total); this.progress = Math.floor(100 * event.loaded / event.total);
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}); });
break; break;
case HttpEventType.Response: case HttpEventType.Response:
...@@ -189,6 +210,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -189,6 +210,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
console.log(event); console.log(event);
this.audioUploaded.emit(event.body); this.audioUploaded.emit(event.body);
this.isUploading = false; this.isUploading = false;
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}); });
break; break;
} }
...@@ -196,8 +220,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -196,8 +220,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
console.error(error); console.error(error);
this.isUploading = false; this.isUploading = false;
}); });
}); });
} }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
// 切换模式 // 切换模式
...@@ -214,15 +242,29 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -214,15 +242,29 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
} else { } else {
this.type = Type.RECORD; this.type = Type.RECORD;
} }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
} }
onBtnClearAudio() { onBtnClearAudio() {
this.audioUrl = null; this.audioUrl = null;
this.audioRemoved.emit(); this.audioRemoved.emit();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
onBtnDeleteAudio() { onBtnDeleteAudio() {
this.audioUrl = null; this.audioUrl = null;
this.audioRemoved.emit(); this.audioRemoved.emit();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
handleChange(info: { type: string, file: UploadFile, event: any }): void { handleChange(info: { type: string, file: UploadFile, event: any }): void {
...@@ -240,6 +282,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -240,6 +282,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.progress = parseInt(info.event.percent, 10); this.progress = parseInt(info.event.percent, 10);
break; break;
} }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
checkSelectFile(file: any) { checkSelectFile(file: any) {
if (!file) { if (!file) {
...@@ -271,6 +316,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -271,6 +316,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.nzMessageService.info('Upload Success'); this.nzMessageService.info('Upload Success');
this.isUploading = false; this.isUploading = false;
this.audioUrl = url; this.audioUrl = url;
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
uploadFailure = (err, file) => { uploadFailure = (err, file) => {
this.isUploading = false; this.isUploading = false;
...@@ -280,6 +328,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -280,6 +328,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
console.log(err); console.log(err);
this.nzMessageService.error('Upload Error ' + err.message); this.nzMessageService.error('Upload Error ' + err.message);
this.audioUploadFailure.emit(file); this.audioUploadFailure.emit(file);
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
doProgress = (p) => { doProgress = (p) => {
if (p > 1) { if (p > 1) {
...@@ -290,6 +341,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -290,6 +341,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
} }
// console.log(Math.floor(p * 100)); // console.log(Math.floor(p * 100));
this.progress = Math.floor(p * 100); this.progress = Math.floor(p * 100);
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment