I am using RecordRTC.js
to send audio to a backend. But I am unable to do that. Can't even find the reason for that.
My code:
// To capture microphone
captureMicrophone(callback) {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(callback)
.catch( (error)=> {
alert('Unable to access your microphone.');
console.error(error);
});
}
// To start recording
startRecording () {
this.captureMicrophone( (microphone) => {
let audio = document.querySelector('audio');
window['setSrcObject'](microphone, audio);
audio.play();
this.recorder = window['RecordRTC'](microphone, {
type: 'audio',
recorderType: window['StereoAudioRecorder'],
desiredSampRate: 16000
});
this.recorder.startRecording();
// release microphone on stopRecording
this.recorder.microphone = microphone;
(<HTMLInputElement> document.getElementById('btn-stop-recording')).disabled = false;
});
};
// To stop recording
stopRecording () {
(<HTMLInputElement> document.getElementById('btn-stop-recording')).disabled = false;
this.recorder.stopRecording(() => {
this.audio = document.querySelector('audio');
var blob = this.recorder.getBlob();
this.audio.src = URL.createObjectURL(blob);
this.audio.play();
this.recorder.microphone.stop();
});
};
// This is to send data to HTTP service to call backend
sendMMS() {
var fileType = 'audio'; // or "audio"
var fileName = 'abcde.wav'; // or "wav"
let formData = new FormData();
formData.append('filename', fileName);
formData.append('data', this.audio.src);
this.bsService.sendMMS(formData);
}
The call is going. But at backend null is coming as data. I think there is something wrong with appending data. I tried so many solutions from StackOverflow. But, no success.
Please help me.
Thank you...
Please try this:
sendMMS() {
var fileType = 'audio'; // or "audio"
var fileName = 'abcde.wav'; // or "wav"
let formData = new FormData();
formData.append('filename', fileName);
formData.append('data', this.recorder.getBlob()); // --------- check this line
this.bsService.sendMMS(formData);
}