Commit 0fa20c07 authored by liujiaxin's avatar liujiaxin

feat: add audio record

parent 02864e65
......@@ -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": {
......
......@@ -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;
......
(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 () {
......
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