Commit 0db7e58f authored by liujiaxin's avatar liujiaxin

feat: add audio record

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