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

Question

我正在工作 angular cli 正在尝试添加麦克风插件不起作用。让我知道如何添加包。这是我的代码 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(); 
}

如果你想对流做一些事情（在另一个 wavesurfer 上播放或发送到服务器），你可以使用 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();
}