Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_matching_cards
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_matching_cards
Commits
51dfa083
Commit
51dfa083
authored
Aug 15, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: add audio record
parent
c4101002
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
79 additions
and
8 deletions
+79
-8
angular.json
angular.json
+5
-1
audio-recorder.component.ts
src/app/common/audio-recorder/audio-recorder.component.ts
+69
-4
play.component.ts
src/app/play/play.component.ts
+1
-0
worker.js
src/assets/libs/audio-recorder/worker.js
+4
-3
No files found.
angular.json
View file @
51dfa083
...
...
@@ -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"
:
{
...
...
src/app/common/audio-recorder/audio-recorder.component.ts
View file @
51dfa083
...
...
@@ -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
;
...
...
src/app/play/play.component.ts
View file @
51dfa083
...
...
@@ -72,6 +72,7 @@ export class PlayComponent extends BaseResizeComponent implements OnInit {
}
},
this
.
saveKey
);
}
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
...
...
src/assets/libs/audio-recorder/worker.js
View file @
51dfa083
(
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
()
{
...
...
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