Question

我正在尝试添加麦克风插件，但无法正常工作。请让我知道如何添加软件包。这是我的代码 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(); 
}

如果您想对流进行某些操作（以在另一个waveurfer上播放该流或将其发送到服务器），则可以使用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();
}

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

1 个答案: