如何添加wavesurfer.js麦克风插件

Question

我正在尝试添加麦克风插件是不工作.Let我知道如何添加软件包。这是我的代码angular.json文件

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"]

      }

*这是我收到错误的.ts文件，有人能帮我一下吗*

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

这就对了：

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

如果您想对流执行某些操作(在另一个want上回放或发送到服务器)，您可以使用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();
}