How to add wavesurfer.js microphone plugin - angular6

Question

am working angular cli am trying to add microphone plugin is not working .Let me know how to add the package.
this my code
angular.json file
scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/wavesurfer.js/dist/wavesurfer.js",
"node_modules/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"]
}
****This is My .ts file where am getting error could somebody help me****
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js';
import * as $ from 'jquery';
import * as WaveSurfer from 'wavesurfer.js';
public start() {
let wavesurfer= WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
plugins: [MicrophonePlugin.create()]
});
wavesurfer.microphone.on('deviceReady', function() {
console.info('Device ready!');
});
wavesurfer.microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
})
let microphone = WaveSurfer.Microphone; // Here am getting error microphone is undefined
microphone.create({
wavesurfer: wavesurfer
});
microphone.on('deviceReady', function(stream) {
console.log('Device ready!', stream);
});
microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
});
// start the microphone
microphone.start();
}

Answer 1

There you go:
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js';
import * as $ from 'jquery';
import * as WaveSurfer from 'wavesurfer.js';
public start() {
let wavesurfer= WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
plugins: [ MicrophonePlugin.create() ]
});
wavesurfer.microphone.on('deviceReady', function (stream) {
console.info('Device ready!', stream);
});
wavesurfer.microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
})
let microphone = wavesurfer.microphone; // you had the case wrong!
/*
You have already done all that stuff above
microphone.create({
wavesurfer: wavesurfer
});
microphone.on('deviceReady', function(stream) {
console.log('Device ready!', stream);
});
microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
});
*/
// start the microphone
microphone.start();
}
If you want to do something with the stream (to play it back on another wavesurfer or to send it to a server), you can use a MediaRecorder:
wavesurfer: Object;
mediaRecorder: Object;
recordingBlob: Object;
public start() {
...
this.recordingBlob = null;
this.wavesurfer.microphone.on('deviceReady', function (stream) {
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.onondataavailable = event => {
this.recordingBlob = event.data;
};
this.mediaRecorder.start();
});
...
}
public stop() {
if (!this.mediaRecorder || !this.wavesurfer) return;
this.mediaRecorder.stop();// triggers mediaRecorder.onondataavailable
this.mediaRecorder = null;
this.wavesurfer.stop();
}