Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_question
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ww_question
Commits
0db7e58f
Commit
0db7e58f
authored
Aug 26, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: add audio record
parent
51f742d7
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
55 additions
and
1 deletion
+55
-1
audio-recorder.component.ts
src/app/common/audio-recorder/audio-recorder.component.ts
+55
-1
No files found.
src/app/common/audio-recorder/audio-recorder.component.ts
View file @
0db7e58f
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
();
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment