Commit 2f4a1e6d authored by liujiaxin's avatar liujiaxin

feat: add audio record

parent 02719a54
...@@ -35,7 +35,11 @@ ...@@ -35,7 +35,11 @@
"./node_modules/animate.css/animate.min.css", "./node_modules/animate.css/animate.min.css",
"src/styles.scss" "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": { "configurations": {
"production": { "production": {
...@@ -135,4 +139,4 @@ ...@@ -135,4 +139,4 @@
"cli": { "cli": {
"analytics": "8ca51870-a656-4ecd-b690-b4d8a6790b2d" "analytics": "8ca51870-a656-4ecd-b690-b4d8a6790b2d"
} }
} }
\ No newline at end of file
...@@ -54,7 +54,10 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -54,7 +54,10 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
audioBlob: any; 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.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData(); this.uploadData = (<any> window).courseware.uploadData();
...@@ -62,6 +65,18 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -62,6 +65,18 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.uploadUrl = url; this.uploadUrl = url;
this.uploadData = data; 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() { init() {
...@@ -99,9 +114,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -99,9 +114,9 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this.audio.pause(); this.audio.pause();
this.isPlaying = false; this.isPlaying = false;
this.audio.remove(); this.audio.remove();
// if (this.recorder.worker) { if (this.recorder.worker) {
// this.recorder.worker.terminate(); this.recorder.worker.terminate();
// } }
} }
progressText(percent) { progressText(percent) {
...@@ -145,10 +160,60 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy { ...@@ -145,10 +160,60 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
// 开始录音 // 开始录音
onBtnRecord = () => { 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() { 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() { onBtnClearAudio() {
this.audioUrl = null; this.audioUrl = null;
......
(function () { (function () {
'use strict'; 'use strict';
if (!importScripts) { if (!self.importScripts) {
return
var importScripts = (function (globalEval) { var importScripts = (function (globalEval) {
var xhr = new XMLHttpRequest; var xhr = new XMLHttpRequest;
return function importScripts() { return function importScripts() {
...@@ -36,8 +37,8 @@ ...@@ -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 mp3Encoder, maxSamples = 1152, samplesMono, lame, config, dataBuffer;
var clearBuffer = function () { var clearBuffer = function () {
......
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