How to add wavesurfer.js microphone plugin

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