<div class="d-flex"> <div class="p-btn-record d-flex"> <div class="btn-clear" (click)="onBtnClearAudio()" *ngIf="withRmBtn && (audioUrl || audioBlob)"> <fa name="close"></fa> </div> <div class="btn-record" *ngIf="type===Type.RECORD && !isUploading" [class.p-recording]="isRecording" (click)="onBtnRecord()"> <fa name="microphone"></fa> Record Audio </div> <nz-upload [nzAccept] = "'.mp3'" [nzShowUploadList]="false" [nzAction]="uploadUrl" [nzData]="uploadData" (nzChange)="handleChange($event)"> <div class="btn-upload" [ngClass]="{'has-clear': withRmBtn && (audioUrl || audioBlob)}" *ngIf="type===Type.UPLOAD && !isUploading"> <fa name="upload"></fa> Upload Audio </div> </nz-upload> <div class="p-upload-progress-bg" *ngIf="isUploading"> <div class="i-bg" [style.width]="progress+'%'"></div> <div class="i-text"> <fa name="cloud-upload"></fa> Uploading... </div> </div> <div *ngIf="audioUrl && needRemove; then truthyTemplate else falsyTemplate"></div> <ng-template #truthyTemplate > <div class="btn-delete" (click)="onBtnDeleteAudio()"> <fa name="close"></fa> </div> </ng-template> <ng-template #falsyTemplate> <div class="btn-switch" (click)="onBtnSwitchType()"> <fa name="cog"></fa> </div> </ng-template> </div> <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"> <nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText" nzType="circle"></nz-progress> <div class="p-btn-play" [style.left]="isPlaying?'8px':''"> <fa [name]="playIcon"></fa> </div> </div> </div>