Vfrdtyky

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(); 

}

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();

}